iFrameの高さ検出が不正確な高さを返します

Question

要素があるiframeがあり、コンテンツに合わせてiframeのサイズを変更しようとしています。 iframeを調べるとボディの高さは577pxですが、JavaScriptの高さにアクセスすると250pxと表示されます。

function getHeight(el) { 
    const {clientHeight, outerHeight, innerHeight, offsetHeight} = el; 
    return clientHeight || outerHeight || innerHeight || offsetHeight; 
} 

// called on iframe's onload event 
function onIframeLoad() { 
    var iFrame = document.getElementById('advertFrame'); 
    if(iFrame) { 
    var heightContainer = iFrame.contentWindow.document.body; 
    var height = getHeight(heightContainer) + 'px'; 
    iFrame.height = height; 
    iFrame.style.height = height; 
    } 
} 

Answer 1

あなたがロードされるのiframeのコンテンツを待ってから、その高さを取得する必要があります。ここでは

は、私は、IFRAMEの高さを取得するために使用しているコードです。 Jqueryには "ready"が組み込まれていて、iframeコンテンツが読み込まれているかどうかを確認する機能があります。 「準備完了」は、イメージとメディアの完全な内容ではなく、ソースHTMLコードの読み込みを指します。そのため、画像やその他のコンテンツの初期高さを設定しなければなりません。

$(document).ready(function(){ 
    $('#advertFrame').ready(function() { 
     this.style.height = 
     this.contentWindow.document.body.offsetHeight + 'px'; 
    }); 
}) 

は、iframeの負荷試験のために、次の例をご確認ください：http://jsfiddle.net/ZrFzF/