在Web开发中，我们经常需要将其它网页或应用程序嵌入到当前页面中。这时，我们通常会使用HTML中的iframe元素来实现。然而，在一些情况下，我们需要知道iframe是否已经成功加载，才能继续执行后续操作。那么，该如何检测是否一个iframe已经加载完毕呢？下面，我将为大家讲解几种方法。
方法一：使用 onload 事件
最简单的方式是使用iframe元素的onload事件。当iframe加载完成后，会触发该事件，我们可以在事件处理函数中执行后续操作。下面是示例代码：
<iframe src="http://example.com" onload="iframeOnload()"></iframe>
<script>
function iframeOnload() {
console.log("iframe loaded!");
}
</script>上述代码中，我们定义了一个iframe，并且给它设置了一个src属性和onload事件处理函数。当iframe加载完成后，会自动调用iframeOnload函数，输出“iframe loaded!”。
方法二：使用 JavaScript 的 readyState 属性
除了onload事件，JavaScript还提供了另外一种方式来判断iframe是否加载完成，它是通过readyState属性来实现的。该属性返回了iframe的当前状态，包括uninitialized（未初始化）、loading（正在加载）、loaded（加载完成）和interactive（可交互）。因此，我们可以通过监控这个属性的变化来判断iframe是否已经加载完成。
下面是示例代码：
-- -------------------- ---- -------
------- ------------ ----------------------------------
--------
--- ------ - -----------------------------------
-- -------------------- -
---------------------------------------- ---------- -
-- ------------------ --- ----------- -
------------------- ----------
-
---
- ---- -
------------------------------- ---------- -
------------------- ----------
---
-
---------上述代码中，我们首先定义了一个iframe，并且给它设置了一个id属性。然后，通过JavaScript代码获取该元素，并添加了一个事件监听器来监控它的readyState属性。当readyState变为“complete”时，就意味着iframe已经加载完成，我们就可以执行后续操作。
方法三：使用 Promise 对象
还有另一种更加现代化的方式来判断iframe是否加载完成，那就是使用Promise对象和iframe.contentWindow属性。具体实现方法如下所示：
-- -------------------- ---- -------
------- ------------ ----------------------------------
--------
-------- ---------------------------- -
------ --- ------------------------- ------- -
------------------------------- ---------- -
------------------------------
---
-------------------------------- ---------- -
---------
---
---
-
--- ------ - -----------------------------------
--------------------------------------------------------- -
------------------- ----------
------------------- -
------------------- ------ -- --------
---
---------上述代码中，我们定义了一个函数getIframeLoadPromise，它返回了一个Promise对象。在该函数中，我们添加了两个事件监听器，分别监听了iframe元素的load和error事件。当iframe加载完成后，resolve函数将会被调用，并把iframe.contentWindow作为参数传递给它。如果加载过程中出现错误，则reject函数将会被调用。
最后，我们通过getIframeLoadPromise函数来获取一个Promise对象，并在其上调用then方法和catch方法来执行后续操作。
总结
本文介绍了三种方法来判断一个iframe是否已经加载完成。第一种方法是使用onload事件，在iframe加载完成后自动触发相应的事件处理函数；第二种方法是使用readyState属性来监控iframe的状态变化；第三种方法则是使用 Promise 对象和iframe.contentWindow属性，具有更好的可读性和可维护性。大家可以根据实际情
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11634