Capture iframe full load event

Question

Is there a way to capture when the iframe content is fully loaded from the parent page?

Answer 1

<iframe> for this load element.

---

How do you listen that this event is up to you, but usually the best way:

1) create your iframe programmatically

This ensures that your load listener is always called by attaching it before the iframe starts loading.

 <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) built-in javascript , this is another way you can use in your HTML markup.

 <script> function onMyFrameLoad() { alert('myframe is loaded'); }; </script> <iframe id="myframe" src="..." onload="onMyFrameLoad(this)"></iframe> 

---

3) You can also attach an event listener after the element in the <script> , but keep in mind that in this case there is little chance that the iframe is already loaded by the time your listener is added. Therefore, it is possible that it will not be called (for example, if iframe is very fast or goes out of cache).

 <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 trigger this type of load event.

Answer 2

None of the above answers worked for me, however it did

UPDATE

As @doppleganger explained below, loading is inactive with jQuery 3.0, so the version using on is updated here. Please note that this really works on jQuery 1.7+, so you can implement it that way even if you are not already on jQuery 3.0.

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

Answer 3

You can also capture the jquery ready event this way:

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

Here is a working example:

http://jsfiddle.net/ZrFzF/

Answer 4

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

 const iframe = document.getElementById('iframe'); const handleLoad = () => console.log('loaded'); iframe.addEventListener('load', handleLoad, true) 

And if you're interested in Observables , this does the trick:

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