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

Question

我正在尝试检测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已经加载和它的文档准备好了？

Answer 1

来检测何时加载了iframe并且它的文档准备好了？

如果您可以让iframe从框架内的脚本中自动告诉您，这是最理想的。例如，它可以直接调用父函数来告诉它已经准备好了。对于跨框架代码的执行总是需要小心，因为事情可能会以您意想不到的顺序发生。另一种选择是在自己的作用域中设置“var onload true；”，并让父脚本嗅探“contentWindow.isready”(如果没有，则添加isready=处理程序)。

如果由于某些原因，让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中的内联‘option’处理程序几乎总是错误的，应该避免，但在这种情况下，有时这是最不糟糕的选择。

Answer 2

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

基本上，您可以将此代码添加到document.ready()中

$('iframe').load(function() {
    RunAfterIFrameLoaded();
});

Answer 3

对于那些使用React的人来说，检测同源iframe加载事件就像在iframe元素上设置onLoad事件侦听器一样简单。

<iframe src={'path-to-iframe-source'} onLoad={this.loadListener} frameBorder={0} />