用 JavaScript 在 iframe 中实现一个 onload 事件

1. 在加载 iFrame 时执行 JavaScript 函数
2. 使用纯 JavaScript 在 iframe 中实现 load 事件
3. 使用 onload 事件监听器在 iframe 中实现 load 事件
4. 在 iframe 的 HTML onload 事件处理程序中使用内联函数

<iframe> 代表内联框架元素。这些是在我们的网站上加载其他网页并与之交互的窗口。使用 iframe 加载的站点或网页会维护其会话历史记录和缓存值，并且不依赖于父浏览器屏幕或调用浏览器屏幕。有时我们可能需要在 iFrame 内容加载后执行一个函数。让我们看看在加载 iframe 内容后在 JavaScript 中运行方法的方法。

在加载 iFrame 时执行 JavaScript 函数

我们可以使用 iframe HTML 标签的 onload 事件处理程序。一旦加载了 iframe 中的所有元素，就会触发该事件。这些包括脚本、图像、链接、子框架等的加载。它接受一个函数声明作为我们在 HTML 标签中提到的参数。onload="siteLoaded()" 将执行 siteLoaded() 函数，这是一个简单的 JavaScript 函数，用于将文本记录到 Web 浏览器控制台。参考以下代码。

<iframe src="https://www.youtube.com/" onload="siteLoaded()"></iframe>

function siteLoaded() {
  console.log('iframe content loaded');
}

输出：

iframe content loaded

使用纯 JavaScript 在 iframe 中实现 load 事件

另一种在 iframe 加载完成后执行 JavaScript 函数的方法是使用 JavaScript 的 onload 事件处理程序。为此，我们查询预期的 HTML 元素并将 JavaScript 函数附加到 HTML 元素的 onload 事件处理程序上。它类似于我们在上一节中解释的方式。不同之处在于我们在这里使用了一种称为 Unobtrusive JavaScript 的纯 JavaScript 方法。HTML 保持简洁和干净。让我们看看下面的代码来更好地理解。

<iframe src="https://www.youtube.com/"></iframe>

document.querySelector('iframe').addEventListener('load', function() {
  console.log('iframe content loaded');
});

输出：

iframe content loaded

执行此代码可能会导致错误，指出 JavaScript 无法向空对象添加侦听器。为此，我们需要将代码包装在 window.onload 方法中。请参阅以下代码片段。

window.onload = function() {
  document.querySelector('iframe').addEventListener('load', function() {
    console.log('iframe content loaded');
  });
}

JavaScript 一旦加载了 window 的所有元素，就会执行 window.onload 函数。JavaScript 的 addEventListener() 函数将事件侦听器链接到 HTML 对象。我们首先需要选择我们打算在其中添加事件侦听器的 HTML 对象。document.querySelector() 返回一个 HTML 对象，在这个对象上，我们使用 .addEventListener() 函数附加加载事件侦听器。addEventListener() 附加一个函数，这里是一个内联函数，一旦加载 iframe 元素就会触发。我们可以使用 addEventListener() 函数向 HTML 元素添加各种事件。但就我们讨论的范围而言，我们将重点关注 load 事件。同样，我们也可以将 click 事件添加到 HTML 对象中。

使用 onload 事件监听器在 iframe 中实现 load 事件

像 .addEventListener() 一样，我们也可以使用 onload 事件。在这里，我们也使用 document.getElementById() 或 document.querySelector() 等函数选择 iframe 元素。选择元素后，我们将为其附加一个 JavaScript 函数。它也可以通过几种方式完成。一种方法是我们内联传递函数。另一种方法是在不使用 () 的情况下附加函数对象。如果我们使用 ()，JavaScript 将在第一个运行实例本身执行该函数。在 JavaScript 中，我们单独使用 onload，这与更通用的 .addEventListener() 不同。参考下面的代码来了解 onload 函数的用法。

<iframe id="my_iframe" src="https://www.youtube.com/"></iframe>

window.onload = function() {
  document.getElementById('my_iframe').onload = function() {
    console.log('iframe content loaded');
  };
}

我们将 document.getElementById('my_iframe').onload 代码部分封装在 window.onload 中，只是为了确保 JavaScript 能够查询元素。window.onload 确保所有元素都已加载并可供 document.getElementById('my_iframe') 获取它们。查询元素后，我们使用 HTML 对象的 onload 事件处理程序将函数附加到它。

在 iframe 的 HTML onload 事件处理程序中使用内联函数

在加载事件上执行函数的另一种方法是在 HTML 中附加一个内联方法。虽然这不是在加载事件上实现 JavaScript 函数的推荐方式，但它在迫切需要时作为一种 hack 派上用场。在这种方法中，我们在 iframe 元素的 onload 函数属性的 HTML 中内联传递方法。一旦 iframe 准备就绪，JavaScript 将执行该函数。参考以下代码了解用法。

<iframe src="https://www.youtube.com/" onload="(function(){ console.log('iFrame Loaded'); })();"></iframe>

输出：

iFrame Loaded

观察我们在 onload 事件处理程序中编写函数调用的方式。内联函数调用包含在 () 中。在内联函数调用之后有一个 ()。它类似于在 div 的 onclick 事件中附加一个函数声明。