检测何时加载了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何时加载并且其文档已准备就绪？

Answer 1

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

如果你能让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'处理程序几乎总是错误的并且要避免,但在这种情况下,有时它是最不好的选择.

Answer 2

看到这篇博文.它使用jQuery,但即使你没有使用它也应该帮助你.

基本上你把它添加到你的 document.ready()

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

Answer 3

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

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