我有一个带有 id = "myIframe" 的 iframe，这里是我的代码来加载它的内容：
$('#myIframe').attr("src", "my_url");
问题是有时加载时间太长，有时加载速度很快。所以我必须使用“setTimeout”函数：
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)
});
随着标准的变化更新了我的答案。
我遇到了同样的问题并添加到此，我需要检查 iframe 是否已加载，而不管跨域策略如何。我正在开发一个 chrome 扩展，它在网页上注入某些脚本并在 iframe 中显示来自父页面的一些内容。我尝试了以下方法，这对我来说很完美。
PS：就我而言，我确实可以控制 iframe 中的内容，但不能控制父站点上的内容。（iframe 托管在我自己的服务器上）
首先：
创建一个带有data-属性的 iframe，例如（在我的情况下，这部分在注入脚本中）
<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'){
//8-12-18 changed from 'data-isload' to 'data-isloaded
$("#myiframe").prop('data-isloaded', '1');
}
}
}
它可能不能完全回答这个问题，但它确实是我通过这种方法解决的这个问题的一个可能情况。
最简单的选择：
<script type="text/javascript">
function frameload(){
alert("iframe loaded")
}
</script>
<iframe onload="frameload()" src=...>
您可以使用 iframe 的load事件在 iframe 加载时做出响应。
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);
};
contentDocument如果 iframesrc指向与您的代码运行的域不同的域，则检查将不起作用。