如何判断iframe加载完成

在网页开发中，iframe（内联框架）是一种常用的元素，它允许在一个HTML文档中嵌入另一个HTML文档。然而，在实际应用中，我们常常需要知道iframe何时加载完成，以便进行后续的操作，比如在iframe加载完成后执行一些JavaScript代码或者显示相关的提示信息。下面介绍几种判断iframe加载完成的方法。

方法一：使用onload事件

在HTML中，iframe标签本身就有一个onload事件，当iframe中的内容加载完成时，该事件会被触发。我们可以通过JavaScript为iframe的onload事件绑定一个处理函数，在这个函数中编写我们想要执行的代码。例如：

<iframe id="myIframe" src="example.html" onload="iframeLoaded()"></iframe>
<script>
function iframeLoaded() {
    console.log('iframe加载完成');
}
</script>

方法二：通过DOMContentLoaded事件

如果我们想要在iframe中的DOM结构加载完成时就执行一些操作，而不等待所有资源（如图片、样式表等）都加载完成，可以使用DOMContentLoaded事件。代码示例如下：

<iframe id="myIframe" src="example.html"></iframe>
<script>
var iframe = document.getElementById('myIframe');
iframe.addEventListener('DOMContentLoaded', function() {
    console.log('iframe的DOM结构加载完成');
});
</script>

方法三：检查iframe的readyState属性

iframe元素有一个readyState属性，它可以反映iframe的加载状态。当readyState的值为"complete"时，表示iframe加载完成。我们可以通过定时检查这个属性的值来判断iframe是否加载完成，示例代码如下：

<iframe id="myIframe" src="example.html"></iframe>
<script>
var iframe = document.getElementById('myIframe');
var checkIframeLoaded = setInterval(function() {
    if (iframe.readyState === 'complete') {
        clearInterval(checkIframeLoaded);
        console.log('iframe加载完成');
    }
}, 100);
</script>

判断iframe加载完成的方法有多种，我们可以根据具体的需求和项目情况选择合适的方法来实现。