Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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>
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>
                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.
– Iest
                Aug 5, 2015 at 8:03
                This approach is also vulnerable to a race condition as the iframe could load before the script tag is executed.
– Iest
                Aug 5, 2015 at 8:09
                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/…
– Sergey Gussak
                May 17, 2017 at 11:31
                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
– Mohammad Dehghan
                Nov 17, 2020 at 15:28
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 
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.
– Sridhar Sarnobat
                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.
– gumuruh
                Nov 13, 2019 at 4:07
                I have an iframe which is display: none but the onload event fires after posting a form to it.
– NitrusAphalion
                Jul 13, 2021 at 13:50
<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();
                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
– roryok
                Nov 27, 2014 at 12:33
                ready is fired when the DOM is ready and js can be executed, not when the content is loaded.
– Sergey Gussak
                May 17, 2017 at 10:30
                $("#iframeid").ready triggers the function when the element is in the dom. Not when the ifram has finished loading.
– Popsyjunior
                May 19, 2017 at 14:29
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.