javascript - 检测 Iframe 内容何时加载(跨浏览器)

Question

我正在尝试检测 iframe 及其内容何时已加载但运气不佳。我的应用程序在父窗口的文本字段中输入一些内容并更新 iframe 以提供“实时预览”

我开始使用以下代码 (YUI) 来检测 iframe 加载事件何时发生。

$E.on('preview-pane', 'load', function(){
    previewBody = $('preview-pane').contentWindow.document.getElementsByTagName('body')[0];
}

'preview-pane' 是我的 iframe 的 ID，我使用 YUI 来附加事件处理程序。但是，尝试在我的回调中访问正文(在 iframe 加载时)失败，我认为是因为 iframe 在事件处理程序准备好之前加载。如果我通过使生成它的 php 脚本延迟 iframe 加载来延迟 iframe 加载，则此代码有效。

基本上，我想问的是跨浏览器检测 iframe 何时加载及其文档准备就绪的正确方法是什么？

Answer 1

to detect when the iframe has loaded and its document is ready?

如果您能让 iframe 通过框架内的脚本告诉您自己，那就太理想了。例如，它可以直接调用一个父函数来告诉它它已经准备好了。跨框架代码执行始终需要小心，因为事情可能会以您意想不到的顺序发生。另一种选择是在其自己的范围内设置“var isready= true;”，并让父脚本嗅探“contentWindow.isready”(如果没有则添加 onload 处理程序)。

如果出于某种原因让 iframe 文档协作不切实际，您就会遇到传统的加载竞争问题，即即使元素彼此相邻:

<img id="x" ... />
<script type="text/javascript">
    document.getElementById('x').onload= function() {
        ...
    };
</script>

无法保证该项目在脚本执行时尚未加载。

避免负载​​竞争的方法是:

1. 在 IE 上，您可以使用“readyState”属性查看是否已加载某些内容；

2. 如果仅在启用 JavaScript 的情况下才可以使用该项目，您可以动态创建它，在设置源和附加到页面之前设置“onload”事件函数。在这种情况下，它无法在设置回调之前加载；

3. 将它包含在标记中的老式方法:

   <img onload="callback(this)" ... />

HTML 中的内联“onsomething”处理程序几乎总是错误的，应该避免，但在这种情况下，有时它是最不坏的选择。