Javascript：<iframe>の高さを反復すると、すべてが0以上の高さを返します。

ウェブページ上にツイートをプログラムで描画しています。 Twitterのjsファイルはこれらのツイートをと表示します。私はページが完全に読み込まれた後に実行するjavascript関数を使用するつもりです。次に、各iframeの高さの高さを配列に集めます。これは後でディスプレイの調整に使用されます。Javascript：<iframe>の高さを反復すると、すべてが0以上の高さを返します。

私は現在、ページが完全に進む前にロードされていることを確認するために、まずこの2つの関数を実行している：

window.onload = function() { 
    $(window).load(function() {}); 
    setTweetContainerHeights(document.getElementsByClassName('twitter'), 
     document.getElementsByTagName('iframe')); 
};

とシンプルなsetTweetContainerHeights機能：上の表示20人の総つぶやきの

function setTweetContainerHeights(containers, iframes) { 
var iframeHeights = []; 
for(var i = 0; i < containers.length; i++) { 
    iframeHeights.push(iframes[i].offsetHeight); 
}

このページは、各ツイートが存在し、高さ> 0のページに表示されているにもかかわらず、値の少なくとも1つが0になるたびに表示されます。？ 別の理由がありますこれらの要素の高さの一部が正しく返されていませんか？

出典

2017-10-27 Miles Henrichs

申し訳ありませんが、私はコメントを投稿できません。

ネット上のさまざまなソースに基づいています。

共通の理解は、すべてのiframeが完全にロードされているまで、メインウィンドウのonloadイベントがクビにしないということです。

しかし、これらのiframeのsrcが動的に設定されていると、iframeが既にロードされた後、つまりメインウィンドウのonloadイベントの後にsrcの設定が行われます。

私はtwitterのjsに慣れていませんが、iframeは動的に生成され、javascriptで追加されているのではなく、サーバー側で生成されます。したがって、メインウィンドウのonloadイベントが発生するのをブロックしませんでした。

次に、iframeの高さをチェックし、高さがゼロでないものを記録し、すべての高さが定義されるまでsetTimeoutを使用してプロセスを繰り返す関数を作成するのが最も安全です。

擬似コード：

var iframeheights=[]; 

function checkHeight(){ 
    var missing=0; 
    $("iframe").each(function(idx){ 
    if (iframeheights[idx]) return true; 
    var height=$(this).offsetHeight(); 
    if (height>0) { 
     iframeheights[idx]=height; 
    } else{ 
     missing++; 
    } 
    }); 
    if (missing) { 
    setTimeout(checkHeight, 10); 
    } else { 
    //load completed, do something or call a callback. 
    } 
} 

$(function(){ 
    checkHeight(); 
}); 



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

}）。 }）;

出典

2017-10-27 06:03:20 hint

Javascript：<iframe>の高さを反復すると、すべてが0以上の高さを返します。

答えて

関連する問題