Question

我刚刚发现我的问题的根源是父HTML调用子级IFRAME中的控件但过于快速，有时候超级 onLoad 尝试之前 onLoad 有机会向DOM添加内容。

我该怎么办？

我试图在孩子的 onLoad 中设置某种反馈。由于很多奇怪的错误导致他们失败，他们可以通过 dude汇总，只是请不要。

我试图设置一个延迟器，这是一个丑陋的史诗比例和不是100％可靠。

编辑：

在onload我这样做：

var stuff = getReferenceToStuff();
var someDiv = stuff.contentWindow.document.getElementById("someDiv");
someDiv.className = "classy";

问题是有时引用 someDiv null 有时（通常当我通过F5重新加载页面时），它指向正确的元素。我知道这是因为IFRAME的内容有点慢。

所以我的问题就是这个。如何确保 onload 被推迟，直到嵌入式IFRAME组件的 onload 确保它已加载并且所有组件都在那里？

Answer 1

使用window.onload body的所有内容，包括iframe的内容和所有其他资源（如图片）时，应加载之前onload被解雇。但是，有些浏览器在触发onload时遇到了问题，即不同的浏览器会在页面解析的不同阶段触发事件。

如果您正在使用DOMContentLoaded或jQuery的$(document).ready()，则只会加载主页的HTML，但某些资源仍然有效（包括iframe的内容加载）。我不知道如果为iframe元素本身附加内联侦听器会发生什么。

如果出现计时问题，可能根本不会在主窗口中触发需要iframe引用的功能。而是在irame的{{1}}中的主窗口中调用该函数。但是如果你使用一些异步技术来填充window.onload，即使这样也无法解决问题。在这种情况下，您需要在所有请求完成后在主窗口中调用该函数。

（现在您可能也知道，我希望您在帖子中看到的代码片段是什么:)）。

Answer 2

我有两个问题的解决方案：

如果您使用的是HTML5，请使用window.postMessage。只需从iFrame发送消息到iFrame onload中的父节点。家长应在iFrame之前的<script>标记中注册处理程序。
在iFrame之前的''标签中向窗口添加回调函数。 iFrame在加载完成后调用此函数。这是基本模板。

以下是示例模板：

  <script>
  window.iframeCallback = function(message) {

    // first clear the temp function we added to the window
    // It is a bad practice to corrupt the global namespace
    delete window.iframeCallback;

    // you do your work here

  };
  </script>

  ..
  ..

  <!-- iFrame should appear after the above script-->
  <iframe/>

Answer 3

onLoad事件并非始终在document上正常运行。它虽然在每个元素上都能正常工作。

var iframes = document.getElementsByTagName('iframe'),
    counter = 0,
    max = iframes.length;

[].forEach.call(iframes, iLoaded);

function iLoaded() {
    if (++counter === max) {
        callback();
    }
}

function callback() {
    // All the iframes are loaded
}

确保IFRAME的onLoad不会执行得太快

3 个答案: