Question

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

＆＃xA;＆＃ xA;

我目前正在运行这两个函数，以确保页面在完成之前已完全加载：

＆＃xA;＆＃xA;

  window.onload = function（） {＆＃XA; $（window）.load（function（）{}）;＆＃xA; setTweetContainerHeights（document.getElementsByClassName（'twitter'），＆＃xA; document.getElementsByTagName（'iframe'））;＆＃xA;};＆＃xA;

＆＃xA;＆＃xA ;

简单的setTweetContainerHeights函数：

＆＃xA;＆＃xA;

  function setTweetContainerHeights（containers，iframes）{＆＃xA; var iframeHeights = [];＆＃xA; for（var i = 0; i＆lt; containers.length; i ++）{＆＃xA; iframeHeights.push（iframes [i] .offsetHeight）;＆＃xA;}＆＃xA;

＆＃xA;＆＃xA;

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

＆＃xA;

Answer 1

很抱歉发布回复，因为我无法发表评论。

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

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

然而，如果这些iframe＆＃39; 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>

}）; }）;

Javascript：迭代<iframe>的高度为某些返回0，都具有高度> 0

1 个答案: