加载前隐藏的 iframe 的 JavaScript 问题

发布于 2024-08-30 13:54:53 字数 1410 浏览 8 评论 0原文

我有一个页面，其中包含使用 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 之外，这是我绝对想避免的。

原文

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

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>

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>

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.

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.

分享到QQ

分享到微博