如何检测是不是加载了 iframe？
Posted
技术标签:
【中文标题】如何检测是不是加载了 iframe？【英文标题】：How can I detect whether an iframe is loaded?如何检测是否加载了 iframe？ 【发布时间】：2012-08-29 07:42:39 【问题描述】：我正在尝试检查用户单击按钮后是否已加载 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 是动态创建的。它不会在初始页面加载时加载。
【问题讨论】：
Click 【参考方案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.
【讨论】：
感谢谢赫的回答。但是，加载页面时，我没有可用的 MainpopupIframe 元素。 MainpopipIframe 是在用户单击按钮后创建的。所以 .load 函数不适用于我的情况。无论如何存档我需要的结果？谢谢。 +1 @Rouge，尝试更新的答案。你可能会喜欢这个。谢谢:-) @SheikhHeera ：如何检查它是否未加载，以便我可以插入源.....if(iframe_loaded)do nothing...else插入 iframe 的 srcload() 已弃用，但这只是因为它与 ajax 函数冲突。推荐的替换只是on("load")。 （不幸的是，文档并没有明确说明这就是您需要做的全部。）
推荐用于什么？这是我所知道的 JQuery 附加负载侦听器的唯一方法（与 .click、.change 等相反，它们是它们对应的 on 对应物的别名）。【参考方案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>
【讨论】：
【参考方案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');
;
【讨论】：
以上是关于如何检测是不是加载了 iframe？的主要内容，如果未能解决你的问题，请参考以下文章