İframe'in genişliğini ve yüksekliğini içindeki içeriğe uyacak şekilde ayarlama

Bir iframein genişlik ve yükseklik değerlerini içeriğe sığacak şekilde otomatik olarak ayarlamak için bir çözüme ihtiyacım var. Mesele şu ki, genişlik ve yükseklik iframe yüklendikten sonra değiştirilebilir. Sanırım iframe içinde yer alan gövdenin boyutlarındaki değişiklikle başa çıkmak için bir olay eylemine ihtiyacım var.

aleksandrbel
Edited question 2018ööp29öö10 Ağustos 2018 в 10:29
Programlama
iframe javascript html adjustment
2009ööp20öö9 Mayıs 2009 в 9:20
36 görünümler
Çözüm
<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
Edited answer 2019ösp38ös16 Eylül 2019 в 4:38
Yorumlar (23)

Çapraz tarayıcı jQuery eklentisi.

iFrame'i içeriğe göre boyutlandırmak için mutationObserver ve iFrame ile ana sayfa arasında iletişim kurmak için postMessage kullanan çapraz yaylı, çapraz alan kütüphane. JQuery ile veya jQuery olmadan çalışır.

Community
Edited answer 2014ööp35öö9 Mart 2014 в 9:35
Yorumlar (1)

Eğer jQuery kullanmak istemiyorsanız işte size tarayıcılar arası bir çözüm:

/**
 * 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;
}
Yorumlar (3)