How can I detect whether an iframe is loaded?

Question

I am trying to check whether an iframe has loaded after the user clicks a button.

I have

$('#MainPopupIframe').load(function(){
    console.log('load the iframe')
    //the console won't show anything even if the iframe is loaded.
})

HTML

<button id='click'>click me</button>

//the iframe is created after the user clicks the button.
<iframe id='MainPopupIframe' src='http://...' />...</iframe>

Any suggestions?

By the way, my iframe is created dynamically. It doesn’t load with the initial page load.

[Click](http://stackoverflow.com/questions/205087/jquery-ready-in-a-dynamically-inserted-iframe) — Viktor S., Sep 04 '12 at 15:50

The Alpha · Accepted Answer · 2021-06-01T00:16:18.580

188

You may try this (using jQuery)

$(function(){
    $('#MainPopupIframe').load(function(){
        $(this).show();
        console.log('iframe loaded successfully')
    });
        
    $('#click').on('click', function(){
        $('#MainPopupIframe').attr('src', 'https://heera.it');    
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='click'>click me</button>

<iframe style="display:none" id='MainPopupIframe' src='' /></iframe>

jsfiddle DEMO.

Update: Using plain javascript

window.onload = function(){
    var ifr = document.getElementById('MainPopupIframe');
    ifr.onload=function(){
        this.style.display='block';
        console.log('laod the iframe')
    };

    var btn = document.getElementById('click');    
    btn.onclick=function(){
        ifr.src='https://heera.it';    
    };
};

<button id='click'>click me</button>

<iframe style="display:none" id='MainPopupIframe' src='' /></iframe>

jsfiddle DEMO.

Update: Also you can try this (dynamic iframe)

$(function(){
    $('#click').on('click', function(){
        var ifr = $('<iframe/>', {
            id:'MainPopupIframe',
            src:'https://heera.it',
            style:'display:none;width:320px;height:400px',
            load:function(){
                $(this).show();
                alert('iframe loaded !');
            }
        });
        $('body').append(ifr);    
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='click'>click me</button><br />

jsfiddle DEMO.

edited Jun 01 '21 at 00:16

answered Sep 04 '12 at 15:54

The Alpha

143,660
29
287
307

Thanks for the answer Sheikh. However, I don't have MainpopupIframe elements available when the page is loaded. The MainpopipIframe was create after the user clicks the button. so .load function doesn't work on my case. Anyway to archive the result i needed? Thanks. +1 – Rouge Sep 04 '12 at 19:25
@Rouge, try the updated answer. You may like this. Thanks :-) – The Alpha Sep 04 '12 at 20:05
@SheikhHeera : how to check if it is not loaded, sothat i can insert the source .....if(iframe_loaded){do nothing...}else{insert the src for iframe} – Hitesh Jan 02 '14 at 07:36
25

`load()` is deprecated, but that's just because it was conflicting with the ajax function. The recommended replacement is simply `on("load")`. (Unfortunately, the docs don't quite make clear that that's all you need to do.) – Teepeemm Oct 05 '14 at 00:25
Recommended for what? It is the only way I know for JQuery to attach a load listener (as opposed to `.click`, `.change`, etc., which are aliases of their corresponding `on` counterpart). – Teepeemm Oct 06 '14 at 00:14
@TheAlpha what's the best way to check if the iFrame loaded successfully? E.g. server is busy, 404 not found, other errors, etc. In this case, the src for the iFrame is the same as the domain of the parent page. I have access to all the iFrames' src. – Henry Situ Nov 20 '15 at 19:45
@vanowm, Which one? Vanilla or jQuery? Can you please collaborate? – The Alpha Jun 24 '17 at 15:07

score 2 · Answer 2 · answered Sep 04 '12 at 15:57

I imagine this like that:

<html>
<head>
<script>
var frame_loaded = 0;
function setFrameLoaded()
{
   frame_loaded = 1;
   alert("Iframe is loaded");
}
$('#click').click(function(){
   if(frame_loaded == 1)
    console.log('iframe loaded')
   } else {
    console.log('iframe not loaded')
   }
})
</script>
</head>
<button id='click'>click me</button>

<iframe id='MainPopupIframe' onload='setFrameLoaded();' src='http://...' />...</iframe>

score 2 · Answer 3 · answered Dec 07 '17 at 22:34

You can try onload event as well;

var createIframe = function (src) {
        var self = this;
        $('<iframe>', {
            src: src,
            id: 'iframeId',
            frameborder: 1,
            scrolling: 'no',
            onload: function () {
                self.isIframeLoaded = true;
                console.log('loaded!');
            }
        }).appendTo('#iframeContainer');

    };

How can I detect whether an iframe is loaded?

3 Answers3

Linked