Question

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

的index.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）。

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无法确定任何元素的维度。

在 iframe被调用之前，有没有办法确保我的$(document).ready(...)可见？除了使用setTimeout延迟jScrollPane之外，这是我绝对想要避免的事情。

Answer 1

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

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

祝你好运。

Answer 2

而不是使用display:none使iframe不可见，您可以尝试...

...设置visibility:hidden

...设置position:absolute; top:-600px;

...设置opacity:0

或使jQuery“看到”对象而不是用户的其他东西（并重置myFrame.onload函数中使用的css-attributes）。

Answer 3

visibility:collapse; display:hidden; height:0px;

也会努力摆脱白色空间.. iframe也会加载..

Answer 4

隐藏的iframe是一个巨大的安全问题。如果它是合法的，可能最好尝试找到另一种方法来实现你想要的东西，因为希望未来的浏览器可以完全摆脱这个功能。 http://blog.opendns.com/2012/07/10/opendns-security-team-blackhole-exploit/

在加载之前隐藏的iframe的Javascript问题

4 个答案: