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何时加载并且文档准备好了？

Answer 1

检测iframe何时加载并且文档准备就绪？

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

如果出于某种原因让iframe文档合作是不切实际的，那么你就会遇到传统的加载竞争问题，即即使元素彼此相邻也是如此：

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

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

负载竞赛的方法是：

，您可以使用'readyState'属性来查看是否已经加载了某些东西;
如果只有启用了JavaScript的项目可以接受，您可以动态创建它，在设置源和附加到页面之前设置'onload'事件功能。在这种情况下，在设置回调之前无法加载;
将学校纳入标记的老派方式：

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

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

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} />

Answer 4

对于任何使用Ember的人来说，这应该按预期工作：

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

Answer 5

jQuery(document).ready(function () {
    jQuery('iframe').load(function() {
        console.log(jQuery(this))
    });
})

检测何时加载了iframe内容（跨浏览器）

5 个答案: