Javascript 捕获 iframe 加载完成事件

Capture iframe load complete event

提问by Jaime Garcia

Is there a way to capture when the contents of an iframe have fully loaded from the parent page?

有没有办法在 iframe 的内容从父页面完全加载时进行捕获？

回答by gblazex

<iframe>elements have a loadeventfor that.

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

---

---

How you listen to that event is up to you, but generally the best way is to:

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

1) create your iframe programatically

1) 以编程方式创建您的 iframe

It makes sure your loadlistener is always called by attaching it beforethe iframe starts loading.

它确保您的load侦听器始终在 iframe 开始加载之前通过附加它来调用。

<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) inline javascript, is another way that you can use inside your HTML markup.

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

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

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

---

---

3) You may also attach the event listener after the element, inside a <script>tag, but keep in mind that in this case, there is a slight chance that the iframe is already loaded by the time you get to adding your listener. Therefore it's possible that it will notbe called (e.g. if the iframe is very very fast, or coming from cache).

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

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

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

---

---

Also see my other answer about which elements can also fire this type of loadevent

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

回答by roryok

Neither of the above answers worked for me, however this did

以上答案都不适合我，但是确实如此

UPDATE:

更新：

As @doppleganger pointed out below, load is gone as of jQuery 3.0, so here's an updated version that uses on. Please note this will actually work on jQuery 1.7+, so you can implement it this way even if you're not on jQuery 3.0 yet.

正如@doppleganger 在下面指出的那样，加载从 jQuery 3.0 开始就消失了，所以这里有一个使用on. 请注意，这实际上适用于 jQuery 1.7+，因此即使您尚未使用 jQuery 3.0，也可以通过这种方式实现它。

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

回答by aitorllj93

There is another consistent way (only for IE9+) in vanilla JavaScript for this:

在 vanilla JavaScript 中有另一种一致的方式（仅适用于 IE9+）：

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

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

And if you're interested in Observablesthis does the trick:

如果您对Observables感兴趣，这可以解决问题：

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

回答by Kenneth M. Kolano

Note that the onload event doesn't seem to fire if the iframe is loaded when offscreen. This frequently occurs when using "Open in New Window" /w tabs.

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

回答by Gonza Oviedo

You can also capture jquery ready event this way:

您还可以通过这种方式捕获 jquery 就绪事件：

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

Here is a working example:

这是一个工作示例：

http://jsfiddle.net/ZrFzF/

http://jsfiddle.net/ZrFzF/