Is there a way to capture when the contents of an iframe have fully loaded from the parent page?
6 Answers
<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
-
1With 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.– IestCommented Aug 5, 2015 at 8:03 -
2This approach is also vulnerable to a race condition as the iframe could load before the script tag is executed.– IestCommented Aug 5, 2015 at 8:09
-
10
-
1Yes, 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/… Commented May 17, 2017 at 11:31
-
2I can't find the reference for the
load
event of theiframe
element. MDN only lists theload
event forWindow
andXMLHttpRequest
. Can anyone post a link to an authentic reference? I only found mentions of the event in W3C spec Commented Nov 17, 2020 at 15:28
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
});
-
2As of jQuery 3.0,
load
is gone. Please use.on('load', function() { ... })
instead. Commented Sep 15, 2016 at 11:59 -
-
"Neither of the above answers worked" now I wonder 9 years later what "above" was... Commented Oct 31, 2023 at 21:48
-
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– roryokCommented Nov 1, 2023 at 22:30
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'));
-
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. Commented Jun 26, 2019 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.– gumuruhCommented Nov 13, 2019 at 4:07
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.
-
6
-
I have an iframe which is display: none but the onload event fires after posting a form to it. Commented Jul 13, 2021 at 13:50
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();
});
You can also capture jquery ready event this way:
$('#iframeid').ready(function () {
//Everything you need.
});
Here is a working example:
-
19I 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– roryokCommented Nov 27, 2014 at 12:33
-
7In addition to @roryok, ready fires when DOM is ready, not the whole page loads. Commented Jul 13, 2015 at 9:18
-
1ready is fired when the DOM is ready and js can be executed, not when the content is loaded. Commented May 17, 2017 at 10:30
-
3$("#iframeid").ready triggers the function when the element is in the dom. Not when the ifram has finished loading. Commented May 19, 2017 at 14:29
-