Capture iframe load complete event

Question

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

Manymanya

possible duplicate of Reading Iframe Content in Iframe Load – Mol

Answer 1

<iframe> elements have a load event for that.

---

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

1) create your iframe programatically

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

<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 not be called (e.g. if the iframe is very very fast, or coming from 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 fire this type of load event

Cyanogen

You'll have to make an Ajax callback to your server. The shown code runs client-side in the browser. – Kelson

With this method you can only have a single function run when the iframe is loaded. See my answer below using addEventListener which allows multiple callbacks to run on the load event. – Pliers

This approach is also vulnerable to a race condition as the iframe could load before the script tag is executed. – Pliers

The point of the answer is the load event. Now, you may use it in different ways. Of course you can use addEventListener, keep in mind this answer is from 2010 when it was safer to show the concept with the onload property which worked in IE too (again, concept with the least amount of code). Your suggestion of the <script> coming before the iframe can fail because getElementById is not guaranteed to find an element below the script tag. You may create the iframe programatically. That's the safest way to ensure your listener is added before the load event. – Cyanogen

The load event doesn't work when you try to download a file. – Batish

explain what you mean? – Cyanogen

Yes, that does not work in IE if the iFrame content is not HTML, e.g. PDF. See this: connect.microsoft.com/IE/feedback/details/809377/… – Agape

I ran into the race condition @Pliers describes. My solution was to leave src and onload blank in the iframe tag, and then in javascript: document.getElementById('myframe').setAttribute('onload', '...'); document.getElementById('myframe').setAttribute('src', '...'); – Inch

I can't find the reference for the load event of the iframe element. MDN only lists the load event for Window and XMLHttpRequest. Can anyone post a link to an authentic reference? I only found mentions of the event in W3C spec – Leg

Note that if you absolutely need to add the load event after the iframe is already in the document, simply re-insert the iframe element (get it via query selector, then append the node somewhere) after adding the load event to it. Yes, this loads the iframe twice, but it's a workaround. – Ogawa

Answer 2

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.

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

Woodall

As of jQuery 3.0, load is gone. Please use .on('load', function() { ... }) instead. – Shoebill

If your using jquery or jqLite then this is the way to go! – Pharr

"Neither of the above answers worked" now I wonder 9 years later what "above" was... – Benzaldehyde

hah, me too, been a long time. but judging by the dates (my answer was 2014) it must have been gblazex and Gonza Oviedo's answers, because the others are newer than mine – Woodall

Answer 3

There is another consistent way (only for IE9+) 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:

import { fromEvent } from 'rxjs';

const iframe = document.getElementById('iframe');

fromEvent(iframe, 'load').subscribe(() => console.log('loaded'));

Technicolor

Is it a concern that my debugger stops at my breakpoint in handleLoad() before I see the iFrame render? I hope that's purely a rendering issue rather than a content loading issue. – Maricela

how about to capture that event by jquery when the iframe is already there... i.e : the iframe is not created by jquery. – Toodleoo

Answer 4

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.

Methaemoglobin

also with iframes with display none ;) – Rhines

I have an iframe which is display: none but the onload event fires after posting a form to it. – Cila

Answer 5

Step 1: Add iframe in template.

<iframe id="uvIFrame" src="www.google.com"></iframe>

Step 2: Add load listener in Controller.

document.querySelector('iframe#uvIFrame').addEventListener('load', function () {
  $scope.loading = false;
  $scope.$apply();
});

Bron

Answer 6

You can also capture jquery ready event this way:

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

Here is a working example:

http://jsfiddle.net/ZrFzF/

Flaxseed

I don't think that code does what you think it does. You can replace that "#iFrame" selector in your fiddle with anything and the alert still fires – Woodall

In addition to @roryok, ready fires when DOM is ready, not the whole page loads. – Marotta

ready is fired when the DOM is ready and js can be executed, not when the content is loaded. – Agape

$("#iframeid").ready triggers the function when the element is in the dom. Not when the ifram has finished loading. – Obliteration

it just called once :( – Afterclap