16

我有一个页面，其中包含一个iframe使用 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）。

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可见？除了使用to delay ，这是我绝对想避免的。 $(document).ready(...)setTimeoutjScrollPane

4

4 回答 4

14

一些浏览器假定当“display:none”应用于被替换的元素（如 Flash 或 iframe）时，不再需要该元素的视觉信息。因此，如果元素稍后由 CSS 显示，浏览器实际上将重新创建可视数据表单。

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

祝你好运。

于 2010-05-07T05:37:25.453 回答
8

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

... 放visibility:hidden

... 放position:absolute; top:-600px;

... 放opacity:0

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

于 2010-04-28T14:38:44.437 回答
0

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

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

于 2013-11-26T17:49:48.100 回答
-4

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

于 2012-09-26T14:58:38.653 回答