Χρειάζομαι μια λύση για την αυτόματη προσαρμογή του "πλάτους" και του "ύψους" ενός "πλαισίου" ώστε να χωράει ίσα-ίσα το περιεχόμενό του. Το θέμα είναι ότι το πλάτος και το ύψος μπορούν να αλλάξουν μετά τη φόρτωση του iframe
. Υποθέτω ότι χρειάζομαι μια ενέργεια συμβάντος για να αντιμετωπίσω την αλλαγή των διαστάσεων του σώματος που περιέχεται στο iframe.
<script type="application/javascript">
function resizeIFrameToFitContent( iFrame ) {
iFrame.width = iFrame.contentWindow.document.body.scrollWidth;
iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}
window.addEventListener('DOMContentLoaded', function(e) {
var iFrame = document.getElementById( 'iFrame1' );
resizeIFrameToFitContent( iFrame );
// or, to resize all iframes:
var iframes = document.querySelectorAll("iframe");
for( var i = 0; i < iframes.length; i++) {
resizeIFrameToFitContent( iframes[i] );
}
} );
</script>
<iframe src="usagelogs/default.aspx" id="iFrame1"></iframe>
Cross-browser jQuery plug-in.
Cross-bowser, cross domain βιβλιοθήκη που χρησιμοποιεί το mutationObserver
για να διατηρεί το iFrame σε μέγεθος με το περιεχόμενο και το postMessage
για την επικοινωνία μεταξύ του iFrame και της σελίδας υποδοχής. Λειτουργεί με ή χωρίς jQuery.
Εδώ είναι μια λύση για cross-browser αν δεν θέλετε να χρησιμοποιήσετε την jQuery:
/**
* Resizes the given iFrame width so it fits its content
* @param e The iframe to resize
*/
function resizeIframeWidth(e){
// Set width of iframe according to its content
if (e.Document && e.Document.body.scrollWidth) //ie5+ syntax
e.width = e.contentWindow.document.body.scrollWidth;
else if (e.contentDocument && e.contentDocument.body.scrollWidth) //ns6+ & opera syntax
e.width = e.contentDocument.body.scrollWidth + 35;
else (e.contentDocument && e.contentDocument.body.offsetWidth) //standards compliant syntax – ie8
e.width = e.contentDocument.body.offsetWidth + 35;
}