如何检测 iframe 是否已加载？

我试图检查一个 iframe 是否已经加载后，用户点击一个按钮。

是的

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

超文本标示语言

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


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

有什么建议吗？

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

299844 次浏览
小开
最佳答案

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.

小开

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

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');


};

提交答案