Javascript 如何检测 iframe 是否已加载？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12267010/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I detect whether an iframe is loaded?
提问by Rouge
I am trying to check whether an iframe has loaded after the user clicks a button.
我试图在用户单击按钮后检查 iframe 是否已加载。
I have
我有
$('#MainPopupIframe').load(function(){
console.log('load the iframe')
//the console won't show anything even if the iframe is loaded.
})
HTML
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.
顺便说一下，我的 iframe 是动态创建的。它不会随着初始页面加载而加载。
回答by The Alpha
You may try this (using jQuery)
你可以试试这个（使用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>Update:Using plain javascript
更新：使用普通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>Update:Also you can try this (dynamic 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 />回答by Desislav Kamenov
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>
回答by Teoman shipahi
You can try onload event as well;
您也可以尝试 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');
};
