在加载之前隐藏的iframe的Javascript问题 [英] Javascript problem with iframe that's hidden before loaded

问题描述

我有一个页面，其中包含使用Javascript加载的 iframe ：

I have a page that contains an iframe that gets loaded using Javascript:

索引。 html

<iframe id="myFrame" width="800" height="600" style="display: none;"></iframe>
<div id="loader"><!-- some loading indicator --></div>

<script type="text/javascript">
function someFunction() {
  var myFrame = document.getElementById('myFrame');
  var loader = document.getElementById('loader');

  loader.style.display = 'block';

  myFrame.src = 'myFrame.html';
  myFrame.onload = function() {
    myFrame.style.display = 'block';
    loader.style.display = 'none';
  };
}
</script>

在 iframe 中加载的页面包含一些Javascript逻辑，用于计算某些元素的大小，以便添加JS驱动的滚动条（jScrollPane + jQuery Dimensions）。

The page that gets loaded in the iframe contains some Javascript logic which calculates the sizes of certain elements for the purposes of adding a JS driven scrollbar (jScrollPane + jQuery Dimensions).

myFrame.html

<div id="scrollingElement" style="overflow: auto;">
  <div id="several"></div>
  <div id="child"></div>
  <div id="elements"></div>
</div>

<script type="text/javascript">
$(document).load(function() {
  $('#scrollingElement').jScrollPane();
});
</script>

这适用于Chrome（可能还有其他Webkit浏览器），但在Firefox和IE中失败，因为在时间 jScrollPane 被调用，所有元素仍然不可见，jQuery Dimensions无法确定任何元素的尺寸。

This works in Chrome (and probably other Webkit browsers), but fails in Firefox and IE because at the time jScrollPane gets called, all the elements are still invisble and jQuery Dimensions is unable to determine any element's dimensions.

有没有办法确保我的 iframe 在 $（文件）.ready（...）之前可见 / code>被调用？除了使用 setTimeout 来延迟 jScrollPane ，这是我绝对想要避免的。

Is there a way to make sure my iframe is visible before $(document).ready(...) gets called? Other than using setTimeout to delay jScrollPane, which is something I definitely want to avoid.

推荐答案

有些浏览器假设当display：none应用于替换元素（如Flash或iframe）时，不再需要该元素的可视信息。因此，如果该元素稍后由CSS显示，则浏览器实际上将从头开始重新创建可视数据。

Some browsers assume that when "display:none" is applied to replaced elements (like Flash or an iframe) the visual info for that element is no longer needed. So, if the element is later displayed by the CSS, the browser will actually recreate the visual data form scratch.

我想iframe默认为display：none ;使浏览器跳过HTML的呈现，使标签没有任何尺寸。我会将可见性设置为隐藏或将其置于页面之外，而不是使用display：none;。

I imagine that having the iframe default to "display:none;" makes the browser skip the rendering of the HTML so the tags don't have any dimensions. I would set the visibility to "hidden" or position it off the page rather than use "display:none;".

祝你好运。

这篇关于在加载之前隐藏的iframe的Javascript问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！