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

Nithin Krishnan 2023年1月30日 2022年5月11日
  1. 在加载 iFrame 时执行 JavaScript 函数
  2. 使用纯 JavaScript 在 iframe 中实现 load 事件
  3. 使用 onload 事件监听器在 iframe 中实现 load 事件
  4. iframe 的 HTML onload 事件处理程序中使用内联函数
用 JavaScript 在 iframe 中实现一个 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 事件中附加一个函数声明。

相关文章 - JavaScript Event