Javascript 检测何时加载Iframe内容（跨浏览器）

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

我从以下代码（YUI）开始检测何时发生iframe加载事件

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

“预览窗格”是iframe的ID，我正在使用YUI附加事件处理程序。但是，尝试访问回调中的主体（在iframe加载时）失败，我认为这是因为iframe在事件处理程序准备就绪之前加载。如果我通过使生成iframe的php脚本处于休眠状态来延迟iframe加载，则该代码可以工作

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

请参阅博客文章。它使用jQuery，但即使您不使用它，它也应该对您有所帮助

基本上，您可以将其添加到

文档中。ready（）

检测iframe何时已加载且其文档已准备就绪

如果您可以让iframe通过框架内的脚本来告诉您自己，这是理想的。例如，它可以直接调用父函数，告诉它它已经准备好了。在执行跨帧代码时始终需要小心，因为事情可能会以您不期望的顺序发生。另一种选择是设置“var isready=true；”并让父脚本嗅探“contentWindow.isready”（如果不是，则添加onload处理程序）

如果出于某种原因，iframe文档无法协同工作，则会出现传统的负载竞争问题，即即使元素彼此相邻：

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

document.getElementById（'x'）。onload=function（）{
...
};

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

脱离负载座圈的方法有：

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

如果允许只在启用JavaScript的情况下使用该项，则可以动态创建它，在设置源并附加到页面之前设置“onload”事件函数。在这种情况下，在设置回调之前无法加载它

将其包含在标记中的老派方法：

---

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

对于那些使用React的人来说，检测相同来源的iframe加载事件就像在iframe元素上设置

onLoad

事件侦听器一样简单

---

对于任何使用余烬的人来说，这应该可以正常工作：

<iframe onLoad={{action 'actionName'}}  frameborder='0' src={{iframeSrc}} />

很有趣，但我遇到的问题是加载事件和计时。我正在听那篇文章建议的加载事件。我已经用

console.log

试过了。它会在iframe加载后被记录。谢谢。我的解决方案检查readyState（如果存在），然后检查body元素innerHTML length以查看它是否已加载。如果不是，则附加加载事件处理程序。似乎工作正常-1-内联事件并不“坏”，这只是当前的时尚。事实上，内联事件更容易调试和理解，不像它们的魔法对应物（另一方面，它们更容易无缝地附加、堆叠和使用）。@Christian，当您需要将事件附加到很长列表的每个元素时，内联事件也是最佳选项。由于您已经在服务器端循环构建列表，因此附加内联事件也会更有效。@haknick您不想在列表上使用单个事件侦听器并使用事件委托吗？这将更有效。如果iframe是跨域的，那么这将不起作用。iframe中的脚本无法访问父窗口。从YUI开始是个坏主意（以及任何其他JS库）。为什么？因为你根本不知道图书馆在发挥什么魔力。如果他们不能完全支持“加载”，你最好用清晰易读的javascript自己加载。你可以经常阅读库@Christian的源代码。我发现这通常会给你一些很好的提示，告诉你如何自己去做，不管你是否使用它们的实现。@AJP你误解了我的观点。如果你正在做一些你不确定的事情，最好是代码少一些，这样错误的空间就少一些。这取决于你如何看待它。我知道YUI的事件处理在当时起作用，所以我不必担心代码的这一部分。我还知道如何编写自己的addEvent处理程序，但在这个问题上它并没有比YUI更好。@Nico这个问题是指YUI，$是YUI的Dom包装器的别名。Can

onLoad

事件只能为同一源iframe触发吗？

<iframe onLoad={{action 'actionName'}}  frameborder='0' src={{iframeSrc}} />