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

我试图检测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和其文档准备好了？

来源

2009-04-15 David Snabel-Caunt

开始接触YUI是一个坏主意（以及任何其他JS库）。为什么？因为你无法知道图书馆在做什么魔术。如果他们不能完全支持“加载”，那么最好用清晰可读的javascript自己完成。 – Christian 2011-05-24 08:22:47

您可以经常阅读库@Christian的源代码。我发现这通常会为您提供有关如何自行完成的重要提示，无论您是否使用其实施。 – AJP 2013-03-06 14:07:28

@AJP你误解了我的观点。如果你正在做一些你不确定的事情，那么最好少一些代码，这样错误的空间就会减少。 – Christian 2013-03-06 17:43:09

当iframe中加载检测和文件已准备就绪？

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

如果由于某种原因，它是不实际的iframe文档协同工作，你已经得到了传统的负载种族问题，即，即使元素是紧挨着对方：

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

不能保证该项目在脚本执行时不会被加载。

出负载比赛的方式是：

在IE浏览器，你可以使用“readyState的”属性，看看是否有什么地方已经加载;
如果仅在启用JavaScript的情况下才能使用该项目，则可以动态创建该项目，并在设置源代码并追加到页面之前设置“onload”事件函数。在这种情况下，它不能在回调设置之前加载;
，包括它在标记的老派的方式：

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

在线“onsomething”在HTML处理器几乎都是错误的东西，并要避免，但在这有时候这是最糟糕的选择。

来源

2009-04-15 13:04:50 bobince

请参阅this博客文章。它使用jQuery，但它应该可以帮助你，即使你不使用它。

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

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

来源

2009-04-15 12:23:33 kgiannakakis

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

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

来源

2016-12-26 11:11:51

对于使用灰烬的人，这应该按预期工作：

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

来源

2017-02-12 22:58:29

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

回答

相关问题