用 JavaScript 在 iframe 中实现一个 onload 事件
<iframe>
代表内联框架元素。这些是在我们的网站上加载其他网页并与之交互的窗口。使用 iframe 加载的站点或网页会维护其会话历史记录和缓存值,并且不依赖于父浏览器屏幕或调用浏览器屏幕。有时我们可能需要在 iFrame
内容加载后执行一个函数。让我们看看在加载 iframe 内容后在 JavaScript 中运行方法的方法。
我们可以使用 iframe
HTML 标签的 onload
事件处理程序。一旦加载了 iframe
中的所有元素,就会触发该事件。这些包括脚本、图像、链接、子框架等的加载。它接受一个函数声明作为我们在 HTML 标签中提到的参数。onload="siteLoaded()"
将执行 siteLoaded()
函数,这是一个简单的 JavaScript 函数,用于将文本记录到 Web 浏览器控制台。参考以下代码。
<iframe src="https://www.jiyik.com/" onload="siteLoaded()"></iframe>
function siteLoaded() {
console.log("iframe content loaded");
}
输出:
iframe content loaded
另一种在 iframe
加载完成后执行 JavaScript 函数的方法是使用 JavaScript 的 onload
事件处理程序。为此,我们查询预期的 HTML 元素并将 JavaScript 函数附加到 HTML 元素的 onload
事件处理程序上。它类似于我们在上一节中解释的方式。不同之处在于我们在这里使用了一种称为 Unobtrusive JavaScript 的纯 JavaScript 方法。HTML 保持简洁和干净。让我们看看下面的代码来更好地理解。
<iframe src="https://www.jiyik.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 对象中。
像 .addEventListener()
一样,我们也可以使用 onload
事件。在这里,我们也使用 document.getElementById()
或 document.querySelector()
等函数选择 iframe 元素。选择元素后,我们将为其附加一个 JavaScript 函数。它也可以通过几种方式完成。一种方法是我们内联传递函数。另一种方法是在不使用 ()
的情况下附加函数对象。如果我们使用 ()
,JavaScript 将在第一个运行实例本身执行该函数。在 JavaScript 中,我们单独使用 onload
,这与更通用的 .addEventListener()
不同。参考下面的代码来了解 onload
函数的用法。
<iframe id="my_iframe" src="https://www.jiyik.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
事件处理程序将函数附加到它。
在加载事件上执行函数的另一种方法是在 HTML 中附加一个内联方法。虽然这不是在加载事件上实现 JavaScript 函数的推荐方式,但它在迫切需要时作为一种 hack 派上用场。在这种方法中,我们在 iframe
元素的 onload
函数属性的 HTML 中内联传递方法。一旦 iframe
准备就绪,JavaScript 将执行该函数。参考以下代码了解用法。
<iframe src="https://www.jiyik.com/" onload="(function(){ console.log('iFrame Loaded'); })();"></iframe>
输出:
iFrame Loaded
观察我们在 onload
事件处理程序中编写函数调用的方式。内联函数调用包含在 ()
中。在内联函数调用之后有一个 ()
。它类似于在 div 的 onclick
事件中附加一个函数声明。
相关文章
在 MySQL 中获取命令历史记录
发布时间:2023/05/09 浏览次数:150 分类:MySQL
-
本文重点介绍了在 Windows 和 Linux 中获取我们已执行的 MySQL 命令历史记录的各种方法。MySQL命令历史
在 Linux 中安装 MySQL 客户端
发布时间:2023/05/09 浏览次数:72 分类:MySQL
-
在 Linux 中安装 MySQL 客户端的命令。Linux 和 Unix 等环境作为命令行界面工作,仅在命令的帮助下运行。
在 MySQL 中转换为十进制
发布时间:2023/05/09 浏览次数:150 分类:MySQL
-
有时,我们可能需要将一种数据类型转换为另一种数据类型。 下面是我们如何使用带有 DECIMAL(M,D) 的 CAST() 和 CONVERT() 函数在 MySQL 中转换为十进制。
在 MySQL 中获取当前日期和时间
发布时间:2023/05/09 浏览次数:145 分类:MySQL
-
本篇文章我们将学习 NOW()、CURRENT_TIMESTAMP()(也写为 CURRENT_TIMESTAMP)和 SYSDATE() 来获取 MySQL 中的当前日期和时间。 我们还将看到这三个功能之间的比较。在 MySQL 中获取当前日期和时间
在 MySQL 中插入多个表
发布时间:2023/05/09 浏览次数:133 分类:MySQL
-
本篇文章将介绍在 MySQL 中插入多个表的事务和存储过程。在 MySQL 中插入多个表 无法将单个MySQL命令插入到多个表中,但是我们可以使用MySQL事务来满足项目需求。
在 Ubuntu 中重置 MySQL root 密码
发布时间:2023/05/09 浏览次数:70 分类:MySQL
-
本篇文章介绍了我们需要在 Ubuntu 中重置 MySQL root 密码的两种情况。 第一,当我们忘记了root密码,想要重新设置; 其次,当我们无法使用 mysql_secure_installation 设置 root 密码时。
在 MySQL 中计算百分比
发布时间:2023/05/09 浏览次数:131 分类:MySQL
-
我们将使用一个或多个列来计算 MySQL 中的百分比。 有不同的方法可以做到这一点,对于每种方法,我们都将使用一个示例表。在 MySQL 中使用一列来计算百分比
在 MySQL 中使用 WHERE 选择多个值
发布时间:2023/05/09 浏览次数:167 分类:MySQL
-
本文是关于使用 MySQL 查询从特定表或关系中获取满足特定条件的数据。 为此,在 SQL 查询中使用 WHERE 子句。
在 MySQL 中创建一个函数
发布时间:2023/05/09 浏览次数:180 分类:MySQL
-
本篇文章介绍了如何在 MySQL 中创建函数。 它首先解释语法,然后使用示例表创建一个函数。在 MySQL 中创建一个函数