如何检测一个iframe是否加载？(How can I detect whether an ifra

我想检查用户点击一个按钮后，一个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>

的jsfiddle DEMO 。

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

更新：你也可以试试这个（动态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 。

Answer 2:

我想这这样的：

<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>

Answer 3:

您可以尝试onload事件为好;

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?