Javascript：迭代 <iframe> 的高度对于某些返回 0，所有高度 > 0答案

【问题标题】：Javascript: iterating over heights of <iframe> returns 0 for some, all have height > 0Javascript：迭代 <iframe> 的高度对于某些返回 0，所有高度 > 0
【发布时间】：2018-04-08 14:46:25
【问题描述】：

我正在以编程方式在网页上呈现推文。 Twitter 的 js 文件使这些推文呈现为<iframe>s。我打算在页面完全加载后使用javascript函数运行，然后将每个相应iframe高度的高度收集到一个数组中，稍后用于调整显示。

我目前首先运行这两个函数，以确保页面在继续之前完全加载：

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

还有简单的 setTweetContainerHeights 函数：

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

在页面上显示的总共 20 条推文中，每次至少有一个值为 0，尽管每条推文都存在并显示在页面上的高度 > 0。这是问题页面未完全加载？是否有其他原因其中一些元素高度未正确返回？

【问题讨论】：

标签： javascript html css iframe twitter

【解决方案1】：

很抱歉发布为答案，因为我无法发布 cmets。

基于网络上的各种来源，例如

一般的理解是，在所有 iframe 完全加载之前，不会触发主窗口的 onload 事件。

但是，如果这些 iframe 的 src 是动态设置的，那么 src 的设置将在 iframe 已经加载之后发生，因此，在主窗口的 onload 事件之后。

我对 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>

}); });

【讨论】：