捕获iframe加载完成事件

当从父页面完全加载iframe的内容时，是否可以捕获？

<iframe>元素为此有一个load事件。

如何收听该事件取决于您，但是通常最好的方法是：

1）以编程方式创建iframe

通过确保在iframe开始加载之前load附加监听器，可以确保始终调用该监听器。

<script>
var iframe = document.createElement('iframe');
iframe.onload = function() { alert('myframe is loaded'); }; // before setting 'src'
iframe.src = '...'; 
document.body.appendChild(iframe); // add it to wherever you need it in the document
</script>

2）内联javascript，是您可以在HTML标记内使用的另一种方法。

<script>
function onMyFrameLoad() {
  alert('myframe is loaded');
};
</script>

<iframe id="myframe" src="..." onload="onMyFrameLoad(this)"></iframe>

3）您也可以将事件侦听器附加在标记内的元素之后<script>，但请记住，在这种情况下，在添加侦听器时，iframe可能已经被加载了。因此，有可能它不会被调用（例如，如果iframe非常快或来自缓存）。

<iframe id="myframe" src="..."></iframe>

<script>
document.getElementById('myframe').onload = function() {
  alert('myframe is loaded');
};
</script>

另请参阅我的其他答案，即哪些元素也可以触发此类load事件

上面的答案都不对我有用，但这确实

更新：

正如@doppleganger在下面指出的那样，自jQuery 3.0起，负载就消失了，因此这是使用的更新版本on。请注意，这实际上可以在jQuery 1.7+上使用，因此即使您尚未使用jQuery 3.0，也可以通过这种方式实现。

$('iframe').on('load', function() {
    // do stuff 
});

还有另一种一致的方法（香草JavaScript中仅适用于IE9 +）：

const iframe = document.getElementById('iframe');
const handleLoad = () => console.log('loaded');

iframe.addEventListener('load', handleLoad, true)

而且，如果您对Observables感兴趣，那么就可以做到：

return Observable.fromEventPattern(
  handler => iframe.addEventListener('load', handler, true),
  handler => iframe.removeEventListener('load', handler)
);

请注意，如果在离屏时加载iframe，onload事件似乎不会触发。使用“在新窗口中打开” / w选项卡时，经常会发生这种情况。

您还可以通过以下方式捕获jquery ready事件：

$('#iframeid').ready(function () {
//Everything you need.
});

这是一个工作示例：

http://jsfiddle.net/ZrFzF/