Προσαρμόστε το πλάτος και το ύψος του iframe για να ταιριάζει με το περιεχόμενο σε αυτό

Χρειάζομαι μια λύση για την αυτόματη προσαρμογή του "πλάτους" και του "ύψους" ενός "πλαισίου" ώστε να χωράει ίσα-ίσα το περιεχόμενό του. Το θέμα είναι ότι το πλάτος και το ύψος μπορούν να αλλάξουν μετά τη φόρτωση του iframe. Υποθέτω ότι χρειάζομαι μια ενέργεια συμβάντος για να αντιμετωπίσω την αλλαγή των διαστάσεων του σώματος που περιέχεται στο iframe.

aleksandrbel
Επεξεργασμένη ερώτηση Κάνε Αύγουστος 2018 в 10:29
Προγραμματισμός
iframe javascript html adjustment
Κάνε Μάιος 2009 в 9:20
15 προβολές
Λύση
<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>
Kodos Johnson
Επεξεργασμένη απάντηση Κάνε Σεπτέμβριος 2019 в 4:38
Σχόλια (23)

Cross-browser jQuery plug-in.

Cross-bowser, cross domain βιβλιοθήκη που χρησιμοποιεί το mutationObserver για να διατηρεί το iFrame σε μέγεθος με το περιεχόμενο και το postMessage για την επικοινωνία μεταξύ του iFrame και της σελίδας υποδοχής. Λειτουργεί με ή χωρίς jQuery.

Community
Επεξεργασμένη απάντηση Κάνε Μάρτιος 2014 в 9:35
Σχόλια (1)

Εδώ είναι μια λύση για 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;
}
Σχόλια (3)