背景
在前端开发中，经常会使用 iframe 元素来嵌入其他网站的内容。但是，当 iframe 开始加载一个新的 URL 时，我们可能需要执行一些操作来处理这个过程。例如，我们可能需要显示一个加载动画，或者在加载完成后更新父页面的某些元素。
本文将介绍如何检测 iframe 开始加载新的 URL，并提供示例代码和指导意义。
解决方案
在 iframe 开始加载新 URL 的时候，会触发 window 对象的 beforeunload 事件，我们可以通过监听该事件来检测 iframe 开始加载新的 URL。具体的实现方式如下：
const iframe = document.querySelector('iframe');
iframe.addEventListener('beforeunload', function() {
// 在此处处理 iframe 开始加载新 URL 的逻辑
});在上面的示例代码中，我们首先获取了一个 iframe 元素，并给它添加了一个 beforeunload 事件监听器。当 iframe 开始加载新的 URL 时，该事件将被触发，我们可以在事件监听器内部处理相应的逻辑。
需要注意的是，在 beforeunload 事件监听器内部不能进行异步操作，因为在该事件处理完毕之前，iframe 的加载过程已经开始，如果我们在这个时候进行异步操作，可能无法得到正确的结果。如果您需要进行异步操作，可以在事件处理程序中添加一个定时器，在合适的时间再去执行异步操作。
示例代码
下面是一个完整的示例代码，它使用了 beforeunload 事件来检测 iframe 开始加载新的 URL，并在加载完成后更新父页面的某个元素：
-- -------------------- ---- -------
--------- -----
------
------
--------- ------ --- -----------
-------
------
---- ------------ --------------- -------------------
------- ---------------------------------------
--------
----- ------ - ---------------------------------
----- ------- - -----------------------------------
--------------------------------------- ---------- -
--------------------- - --------
---
------------------------------- ---------- -
--------------------- - -------
------------------------------------------- - -------
---
---------
-------
-------在上面的示例代码中，我们首先定义了一个显示“加载中...”文本的 div 元素，并设置了它的 CSS 样式为 display: none;，以便在加载完成之前隐藏它。然后，我们嵌入了一个 iframe 元素，并给它添加了 beforeunload 和 load 事件监听器。当 iframe 开始加载新的 URL 时，beforeunload 事件将被触发，我们将显示“加载中...”文本；当 iframe 加载完成后，load 事件将被触发，我们将隐藏“加载中...”文本，并更新父页面的 status 元素为“加载完成”。
指导意义
在前端开发中，检测 iframe 开始加载新 URL 是一个常见的需求。本文介绍了一种简单有效的解决方案，通过监听 beforeunload 事件来检测 iframe 开始加载新的 URL。
需要注意的是，在 beforeunload 事件监听器内部不能进行异步操作，如果您需要进行异步操作，可以在事件处理程序中添加一个定时器，在合适的时间再去执行异步操作。
希望本文能够对大家有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29703