如何检查iframe是否被加载或有内容?

我有一个id =“myIframe”的iframe,在这里我的代码加载它的内容:

$('#myIframe').attr("src", "my_url"); 

这个问题有时需要花费很长时间才能完成,有时甚至会很快加载。 所以我必须使用“setTimeout”function:

 setTimeout(function(){ if (//something shows iframe is loaded or has content) { //my code } else { $('#myIframe').attr("src",""); //stop loading content } },5000); 

所有我想知道的是如何找出一个iFrame是否被加载或有内容。 使用iframe.contents().find()将不起作用。 我不能使用iframe.load(function(){})

尝试这个。

 <script> function checkIframeLoaded() { // Get a handle to the iframe element var iframe = document.getElementById('i_frame'); var iframeDoc = iframe.contentDocument || iframe.contentWindow.document; // Check if loading is complete if ( iframeDoc.readyState == 'complete' ) { //iframe.contentWindow.alert("Hello"); iframe.contentWindow.onload = function(){ alert("I am loaded"); }; // The loading is complete, call the function we want executed once the iframe is loaded afterLoading(); return; } // If we are here, it is not loaded. Set things up so we check the status again in 100 milliseconds window.setTimeout('checkIframeLoaded();', 100); } function afterLoading(){ alert("I am here"); } </script> <body onload="checkIframeLoaded();"> 

善意使用:

 $('#myIframe').on('load', function(){ //your code (will be called once iframe is done loading) }); 

更新我的答案,因为标准改变了。

最简单的select:

 <script type="text/javascript"> function frameload(){ alert("iframe loaded") } </script> <iframe onload="frameload()" src=...> 

我不确定是否可以检测是否加载,但是一旦完成加载就可以触发事件:

 $(function(){ $('#myIframe').ready(function(){ //your code (will be called once iframe is done loading) }); }); 

编辑:正如Jesse Hallett所指出的那样,即使已经加载了iframe ,也会始终启动。 所以基本上,如果iframe已经加载,callback将立即执行。

我有同样的问题,并添加到这一点,我需要检查是否加载iframe无论跨域的政策。 我正在开发一个Chrome扩展,它在网页上注入某些脚本,并在iframe中显示来自父页面的一些内容。 我尝试了下面的方法,这对我来说是完美的。
PS:在我的情况下,我确实控制了iframe中的内容,而不是在父站点上。 (Iframe托pipe在我自己的服务器上)

第一:
创build一个iframe,其中包含一个data- attribute(这个部分在我的情况下是注入脚本)
<iframe id="myiframe" src="http://anyurl.com" data-isloaded="0"></iframe>

现在在iframe代码中,使用:

 var sourceURL = document.referrer; window.parent.postMessage('1',sourceURL); 

现在回到注入的脚本,根据我的情况:

 setTimeout(function(){ var myIframe = document.getElementById('myiframe'); var isLoaded = myIframe.prop('data-isloaded'); if(isLoaded != '1') { console.log('iframe failed to load'); } else { console.log('iframe loaded'); } },3000); 

和,

 window.addEventListener("message", receiveMessage, false); function receiveMessage(event) { if(event.origin !== 'https://someWebsite.com') //check origin of message for security reasons { console.log('URL issues'); return; } else { var myMsg = event.data; if(myMsg == '1'){ $("#myiframe").prop('data-isload', '1'); } } } 

它可能不完全回答这个问题,但它确实是我通过这种方法解决了这个问题的一个可能的情况。

当iframe加载时,您可以使用iframe的load事件进行响应。

 document.querySelector('iframe').onload = function(){ console.log('iframe loaded'); }; 

这不会告诉你是否加载了正确的内容:要检查,你可以检查contentDocument

 document.querySelector('iframe').onload = function(){ var iframeBody = this.contentDocument.body; console.log('iframe loaded, body is: ', body); }; 

如果iframe src指向运行代码的其他域,则检查contentDocument将不起作用。

当一个iFrame加载时,它最初包含#document,所以检查加载状态可能是最好的工作,通过检查现在有什么。

 if ($('iframe').contents().find('body').children().length > 0) { // is loaded } else { // is not loaded } 

在我的情况下,这是一个跨源框架,有时不加载。 我的解决scheme是:如果它被成功加载,那么如果你试试这个代码:

 var iframe = document.getElementsByTagName('iframe')[0]; console.log(iframe.contentDocument); 

它不会允许你访问contentDocument并抛出一个交叉错误,但是如果frame没有被成功载入,那么contentDocument将会返回一个#document对象