如何检查 iframe 是否已加载或是否有内容？

6 个月前提问

3 个月前修改

浏览次数96次

6个答案

这里我可以提供几种常用的方法，并给出相应的实例。

方法一：使用 onload 事件

onload事件可以用来检测iframe何时完成加载。这是检测iframe是否加载的一个直观且常用的方法。

html
<iframe id="myIframe" src="example.html" onload="alert('Iframe is loaded');"></iframe>

在这个例子中，当iframe加载完成后，会弹出一个提示框告知用户。

方法二：使用 JavaScript 检查内容

我们可以通过JavaScript来访问iframe内的文档和元素，从而检测其内容：

javascript
var iframe = document.getElementById('myIframe');
iframe.onload = function() {
    var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
    if (iframeDocument.body.children.length > 0) {
        console.log("Iframe 有内容");
    } else {
        console.log("Iframe 为空");
    }
};

这段代码首先获取iframe元素，然后在其加载完成后，检查其文档的body是否有子元素。这可以作为内容是否存在的一个简单检验。

方法三：定期检查iframe内容

在某些情况下，iframe的内容是动态加载的，可能需要定期检查其内容。可以使用 setInterval 来周期性地检查：

javascript
var checkIframe = setInterval(function() {
    var iframeDocument = document.getElementById('myIframe').contentDocument || document.getElementById('myIframe').contentWindow.document;
    if (iframeDocument.readyState === 'complete') {
        clearInterval(checkIframe);
        if (iframeDocument.body.children.length > 0) {
            console.log("Iframe 加载并有内容");
        } else {
            console.log("Iframe 加载但没有内容");
        }
    }
}, 100);

这段代码设置了一个定时器，每100毫秒检查一次iframe的状态，一旦检测到iframe的内容完全加载，就会停止检查，并根据内容的有无来输出结果。

以上就是一些检测iframe是否加载和是否有内容的方法。在实际开发中，您可能需要根据具体情况选择合适的方法。

2024年6月29日 12:07 回复

尝试这个。

shell
<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();">

2024年6月29日 12:07 回复

请使用：

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

随着标准的变化更新了我的答案。

2024年6月29日 12:07 回复

我遇到了同样的问题，除此之外，我需要检查 iframe 是否已加载，无论跨域策略如何。我正在开发一个 chrome 扩展，它会在网页上注入某些脚本，并在 iframe 中显示父页面的一些内容。我尝试了以下方法，这对我来说非常有效。
PS：就我而言，我确实可以控制 iframe 中的内容，但不能控制父网站上的内容。（iframe 托管在我自己的服务器上）

首先：
创建一个带有data-属性的 iframe（在我的情况下，这部分位于注入脚本中）
<iframe id="myiframe" src="http://anyurl.com" data-isloaded="0"></iframe>

现在在 iframe 代码中，使用：

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

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

shell
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);

和，

shell
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');
        }
    }           
}

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

2024年6月29日 12:07 回复

最简单的选择：

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

<iframe onload="frameload()" src=...>

2024年6月29日 12:07 回复

您可以使用 iframe 的load事件在 iframe 加载时做出响应。

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

这不会告诉您是否加载了正确的内容：要检查这一点，您可以检查contentDocument.

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

如果 iframe指向与代码运行位置不同的域，则检查contentDocument将不起作用。src

2024年6月29日 12:07 回复

如何检查 iframe 是否已加载或是否有内容？

6个答案

方法一：使用 onload 事件

方法二：使用 JavaScript 检查内容

方法三：定期检查iframe内容

你的答案