如何判断iframe加载完成

如何判断 iframe 加载完成？

在网页开发中，当需要加载外部页面或者其他网页时，常常会使用到 iframe 标签。但是，有时候我们需要在 iframe 加载完成后进行一些操作，比如获取 iframe 中的内容或者执行一些 JavaScript 代码。所以，判断 iframe 加载完成是一项很重要的任务。

下面我将分享几种判断 iframe 加载完成的方法，并提供具体的代码示例。

1、使用 iframe 的 onload 事件

iframe 标签提供了一个 onload 事件，当 iframe 内的内容加载完成后会触发该事件。我们可以通过在页面中嵌入一个隐藏的 iframe，并监听其 onload 事件，来判断 iframe 是否加载完成。

HTML 代码：

<iframe id="myIframe" src="external.html" style="display:none;"></iframe>

JavaScript 代码：

var iframe = document.getElementById("myIframe");
iframe.onload = function() {
  // iframe 加载完成后执行的操作
  console.log("iframe 加载完成");
};

2、使用 iframe 的 contentWindow 属性

通过 iframe 的 contentWindow 属性，我们可以获取到内嵌页面的 window 对象。利用这个对象，我们可以判断 iframe 中的文档是否加载完成。

HTML 代码：

<iframe id="myIframe" src="external.html"></iframe>

JavaScript 代码：

var iframe = document.getElementById("myIframe");
var iframeWindow = iframe.contentWindow;

var checkIframeLoaded = function() {
  if (iframe && iframe.contentDocument.readyState === 'complete') {
    // iframe 加载完成后执行的操作
    console.log("iframe 加载完成");
  } else {
    // 等待 iframe 加载完成
    setTimeout(checkIframeLoaded, 100);
  }
};

checkIframeLoaded();

3、使用 jQuery 的 ready 方法

如果项目中使用了 jQuery 库，可以使用它提供的 ready 方法来判断 iframe 加载完成。

HTML 代码：

<iframe id="myIframe" src="external.html"></iframe>

JavaScript 代码：

$(document).ready(function() {
  $('#myIframe').on('load', function() {
    // iframe 加载完成后执行的操作
    console.log('iframe 加载完成');
  });
});

结语

以上是几种判断 iframe 加载完成的方法和代码示例。根据实际情况选择合适的方法，即可实现对 iframe 加载完成事件的监听和处理。希望本文对您在判断 iframe 加载完成时有所帮助！