如何判断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 加载完成时有所帮助！

以上关于如何判断iframe加载完成的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。