it-swarm.dev

检测何时加载了的iframe内容(跨浏览器)

我正在尝试检测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何时加载并且其文档已准备就绪?

79
David Snabel-Caunt

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

67
bobince

请参阅 this blog post。它使用jQuery,但即使你没有使用它也应该帮助你。

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

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

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

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

9
Farzad YZ

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

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