如何检测是否已加载iframe？

Question

我正在尝试检查用户单击按钮后是否已加载iframe。

我有

$('#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>

有什么建议么？

顺便说一下，我的iframe是动态创建的。它不会随初始页面加载一起加载。

Answer 1

您可以尝试使用（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>

更新： 使用普通格式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>

更新： 您也可以尝试一下（动态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 />