Rouge Rouge - 5 months ago 28
Javascript Question

How can I detect whether an iframe is loaded?

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.

Answer

You may try this (using jQuery)

$(function(){
    $('#MainPopupIframe').on('load', function(){
        $(this).show();
        console.log('load the iframe')
    });

    $('#click').on('click', function(){
        $('#MainPopupIframe').attr('src', 'http://heera.it');    
    });
});

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='http://heera.it';    
    };
};

DEMO.

Update: Also you can try this (dynamic iframe)

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

DEMO.