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

I'm trying to detect when an iframe and its content have loaded but not having much luck. My application takes some input in text fields in the parent window and updates the iframe to provide a 'live preview'

我正在尝试检测iframe及其内容何时加载但没有太多运气。我的应用程序在父窗口的文本字段中输入一些内容并更新iframe以提供“实时预览”

I started with the following code (YUI) to detect when the iframe load event occurs.

我开始使用以下代码（YUI）来检测iframe加载事件何时发生。

$E.on('preview-pane', 'load', function(){
    previewBody = $('preview-pane').contentWindow.document.getElementsByTagName('body')[0];
}

'preview-pane' is the ID of my iframe and I'm using YUI to attach the event handler. However, trying to access the body in my callback (upon iframe load) fails, I think because the iframe loads before the event handler is ready. This code works if I delay the iframe loading by making the php script that generates it sleep.

'preview-pane'是我的iframe的ID，我正在使用YUI来附加事件处理程序。但是，尝试在我的回调中访问正文（在iframe加载时）失败，我认为因为iframe在事件处理程序准备好之前加载。如果我通过使生成它的php脚本进入睡眠状态来延迟iframe加载，则此代码有效。

Basically, I'm asking what is the correct approach across browsers to detect when the iframe has loaded and its document is ready?

基本上，我问的是什么是跨浏览器的正确方法来检测iframe何时加载并且其文档已准备就绪？

4 个解决方案

#1

to detect when the iframe has loaded and its document is ready?

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

It's ideal if you can get the iframe to tell you itself from a script inside the frame. For example it could call a parent function directly to tell it it's ready. Care is always required with cross-frame code execution as things can happen in an order you don't expect. Another alternative is to set ‘var isready= true;’ in its own scope, and have the parent script sniff for ‘contentWindow.isready’ (and add the onload handler if not).

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

If for some reason it's not practical to have the iframe document co-operate, you've got the traditional load-race problem, namely that even if the elements are right next to each other:

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

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

there is no guarantee that the item won't already have loaded by the time the script executes.

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

The ways out of load-races are:

负载竞赛的方法是：

on IE, you can use the ‘readyState’ property to see if something's already loaded;

在IE上，您可以使用'readyState'属性来查看是否已经加载了某些东西;
if having the item available only with JavaScript enabled is acceptable, you can create it dynamically, setting the ‘onload’ event function before setting source and appending to the page. In this case it cannot be loaded before the callback is set;

如果只有启用JavaScript的项目可用，您可以动态创建它，在设置源和附加到页面之前设置'onload'事件功能。在这种情况下，在设置回调之前无法加载它;
the old-school way of including it in the markup:

老式的方式将它包含在标记中：

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

Inline ‘onsomething’ handlers in HTML are almost always the wrong thing and to be avoided, but in this case sometimes it's the least bad option.

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

#2

See this blog post. It uses jQuery, but it should help you even if you are not using it.

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

Basically you add this to your document.ready()

基本上你将它添加到你的document.ready（）

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

#3

For those using React, detecting a same-origin iframe load event is as simple as setting onLoad event listener on iframe element.

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

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

</p>

#4

For anyone using Ember, this should work as expected:

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

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

#1