如何检查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对象
