202

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

gblazex
  • 49,155
  • 12
  • 98
  • 91
Jaime Garcia
  • 6,744
  • 7
  • 49
  • 61
  • 1
    possible duplicate of [Reading Iframe Content in Iframe Load](http://stackoverflow.com/questions/1229365/reading-iframe-content-in-iframe-load) – Pekka Jun 29 '10 at 16:58

6 Answers6

291

<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

Community
  • 1
  • 1
gblazex
  • 49,155
  • 12
  • 98
  • 91
  • You'll have to make an Ajax callback to your server. The shown code runs client-side in the browser. – Stijn de Witt Jul 22 '14 at 11:41
  • 1
    With this method you can only have a single function run when the iframe is loaded. See [my answer below](http://stackoverflow.com/a/27824455/2111850) using `addEventListener` which allows multiple callbacks to run on the load event. – Iest Aug 05 '15 at 08:03
  • 2
    This approach is also vulnerable to a [race condition](https://en.wikipedia.org/wiki/Race_condition) as the iframe could load before the script tag is executed. – Iest Aug 05 '15 at 08:09
  • 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 ` – gblazex Aug 05 '15 at 09:18
  • 8
    The load event doesn't work when you try to download a file. – Jerry Aug 06 '15 at 06:35
  • explain what you mean? – gblazex Aug 06 '15 at 07:09
  • 1
    Yes, that does not work in IE if the iFrame content is not HTML, e.g. PDF. See this: https://connect.microsoft.com/IE/feedback/details/809377/ie-11-load-event-doesnt-fired-for-pdf-in-iframe – Sergey Gussak May 17 '17 at 11:31
  • I ran into the race condition @Iest 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', '...');` – Wisco crew Mar 02 '20 at 02:02
  • 2
    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](https://www.w3.org/html/wg/spec/the-iframe-element.html) – Mohammad Dehghan Nov 17 '20 at 15:28
36

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 
});
roryok
  • 9,325
  • 17
  • 71
  • 138
22

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'));
Ilia Reshetnikov
  • 3,732
  • 1
  • 6
  • 11
aitorllj93
  • 434
  • 3
  • 11
  • 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. – Sridhar Sarnobat Jun 26 '19 at 22:00
  • how about to capture that event by jquery when the iframe is already there... i.e : the iframe is not created by jquery. – gumuruh Nov 13 '19 at 04:07
5

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.

Kenneth M. Kolano
  • 191
  • 2
  • 6
4

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();
});
Yuvraj Patil
  • 7,944
  • 5
  • 56
  • 56
1

You can also capture jquery ready event this way: 

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

Here is a working example:

http://jsfiddle.net/ZrFzF/

Gonza Oviedo
  • 1,312
  • 15
  • 20