基于JS判断iframe是否加载成功的方法(多种浏览器)

判断iframe是否加载成功一般可以通过以下几种方法:

1. 使用iframe的onload事件

在iframe页面加载完成后触发onload事件,可以使用此事件判断页面是否加载完成。

示例代码如下:

<iframe id="test_iframe" src="test.html" onload="onIframeLoad()"></iframe>

<script>
function onIframeLoad() {
  var iframe = document.getElementById("test_iframe");
  console.log("iframe页面加载完成", iframe.contentDocument); // 在控制台输出iframe页面文档内容
}
</script>

2. 使用setInterval轮询iframe的内容

如果iframe的onload事件无法被触发,可以考虑使用setInterval轮询iframe的内容,判断是否加载完成。

示例代码如下:

<iframe id="test_iframe" src="test.html"></iframe>

<script>
var intervalId = setInterval(function() {
  var iframe = document.getElementById("test_iframe");
  try {
    var contentDocument = iframe.contentDocument;
    clearInterval(intervalId); // 如果可以获取到contentDocument,说明iframe加载完成,可以停止轮询
    console.log("iframe页面加载完成", contentDocument); // 在控制台输出iframe页面文档内容
  } catch(e) {
    console.log("iframe页面未加载完成"); // 如果无法获取contentDocument,说明iframe页面未加载完成
  }
}, 1000); // 每隔1秒轮询一次
</script>

3. 在iframe页面中使用window.parent通信

如果iframe和父页面在同一域名下,可以在iframe页面中使用window.parent通信,向父页面发送消息,通知父页面iframe已经加载完成。

示例代码如下:

<!-- 父页面 -->
<iframe id="test_iframe" src="test.html"></iframe>

<script>
window.addEventListener("message", function(event) {
  if (event.data === "iframeLoaded") {
    console.log("iframe页面加载完成"); // 在控制台输出结果
  }
});

// 在iframe加载完成后向父页面发送消息
var iframe = document.getElementById("test_iframe");
iframe.addEventListener("load", function() {
  window.parent.postMessage("iframeLoaded", "*");
});
</script>

<!-- iframe页面 -->
<script>
// 在iframe加载完成后向父页面发送消息
window.addEventListener("load", function() {
  window.parent.postMessage("iframeLoaded", "*");
});
</script>

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:基于JS判断iframe是否加载成功的方法(多种浏览器) - Python技术站

(0)
上一篇 2023年6月25日
下一篇 2023年6月25日

相关文章

  • iOS9.3.2固件下载 苹果iOS9.3.2正式版固件下载地址大全

    iOS 9.3.2固件下载攻略 苹果iOS 9.3.2是一款重要的操作系统版本,它带来了一些新功能和修复了一些问题。如果你想下载并安装iOS 9.3.2固件,下面是一个详细的攻略,包含了下载地址和示例说明。 步骤一:备份设备 在开始下载和安装iOS 9.3.2固件之前,强烈建议你先备份你的设备。这样可以确保你的数据在升级过程中不会丢失。你可以通过iTunes…

    other 2023年8月4日
    00
  • 盘点6款实用的文件对比工具 你都用过吗?

    以下是关于“盘点6款实用的文件对比工具你都用过吗?”的完整攻略,包括基本知识和两个示例说明。 基本知识 文件对比工具是一种用于比较个或多个文件之差异的软件。文件对比工具可以帮助用户找到文件之间的差异,包括文本、二制、图像等文件类型。常见的文件对比工具包括WinMerge、Beyond Compare、DiffMerge等。 以下是6款实用的文件对比工具: W…

    other 2023年5月7日
    00
  • pythonnp.mean()函数

    以下是关于“python np.mean()函数”的完整攻略,包含两个示例。 背景 在Python中,我们可以使用numpy库来进行科学计算。其中,np.mean函数是numpy库中的一个函数,用于计算数组或矩阵的平均值。那,在Python中,我们应如何使用np.mean()函数呢? 使用方法 在Python中,我们可以使用np.mean()函数来计算数组或…

    other 2023年5月9日
    00
  • C#Light Unity逻辑热更新解决方案0.20 发布

    C#Light Unity逻辑热更新解决方案0.20 发布的完整攻略 C#Light Unity逻辑热更新解决方案0.20是一种用于Unity游戏引擎的热更新解决方案。本文将详细讲解C#Light Unity逻辑热更新解决方案0.20的完整攻略,包括解决方案的基本概念、使用方法、示例说明等。 解决方案的基本概念 C#Light Unity逻辑热更新解决方案0…

    other 2023年5月5日
    00
  • Java基本数据类型与封装类型详解(int和Integer区别)

    Java基本数据类型与封装类型详解(int和Integer区别) 在Java中,数据类型可以分为两类:基本数据类型和引用数据类型。其中,基本数据类型包括整型、浮点型、字符型、布尔型等。而引用数据类型则包括除了基本数据类型以外的类型,如字符串、数组、自定义类型等。 基本数据类型与封装类型 Java中的基本数据类型有8种,分别为:byte、short、int、l…

    other 2023年6月25日
    00
  • vue弹出框组件封装实例代码

    下面我将为你详细讲解“Vue弹出框组件封装实例代码”的攻略。 一、组件功能 我们要封装的组件是一个弹出框组件,其功能包括: 支持自定义标题和内容 支持自定义底部按钮(例如确定和取消) 支持点击遮罩层关闭弹出框 二、组件使用 在使用该组件时,我们需要做以下几步: 下载并安装该组件所需要的依赖库 在项目中引入该组件 使用该组件 1. 下载并安装依赖库 该组件所需…

    other 2023年6月25日
    00
  • JavaScript数组特性与实践应用深入详解

    接下来我会详细讲解“JavaScript数组特性与实践应用深入详解”的完整攻略,主要分为三个部分:介绍JavaScript数组的特性,探讨数组的实践应用以及通过两个示例说明如何实现高效的数组操作。 一、JavaScript数组特性 JavaScript数组是一种数据结构,用于存储一组数据,并且可以通过数组下标访问每个元素。以下是JavaScript数组的一些…

    other 2023年6月25日
    00
  • 解决lombok 父类和子类builder不兼容的问题

    当使用Lombok框架时,有时会遇到使用父类的Builder创建子类实例时出现兼容性问题的情况。这是因为父类和子类在使用Lombok注解生成的Builder时,使用的是不同的构造器和setter方法。 要解决这个问题,我们可以使用下面的步骤来解决: 1. 使用 @SuperBuilder 注解 在父类和子类中都添加 @SuperBuilder 注解,这个注解…

    other 2023年6月26日
    00
合作推广
合作推广
分享本页
返回顶部