JavaScript onunload 事件

当用户尝试加载页面但不成功时，页面将保持未加载状态，并会触发 JavaScript onunload 事件。如果浏览器在页面加载过程中被关闭，也有可能触发 onunload 事件。

当用户在选择、提交、点击和离开浏览器窗口时离开页面，onunload 事件通常会进入 onunload 状态。此外，当用户尝试加载 URL 或浏览器并访问已加载的数据时，也会发生此事件。

语法

onunload 事件通过 javascript 函数用于 html 页面。html 页面和 javascript 函数的语法如下。

• HTML 语法

在 html 容器或标签中添加属性和值。

• JavaScript 语法

在 javascript 中使用 html 属性名称和函数。

此属性具有单个值脚本，该脚本在 onunload 事件被触发时执行。

JavaScript 中的 onunload 示例

以下示例显示了 onunload 事件及其输出。

示例 1

此程序演示了 onunload JavaScript 函数，用户首先使用它来调用一个 web 页面以获取其功能，然后尝试关闭窗口以查看该函数是否已使用脚本再次加载，最后使用脚本将一个 alert 函数分配为输出所示。

输出

以下输出显示了警报函数中的 onunload 事件信息。

示例 2

unonload JavaScript 函数在示例中使用 console 方法工作。unonload 函数事件的输出显示在控制台选项卡中，html 页面的输出显示在网页上。

输出

以下输出显示了控制台函数中的 onunload 事件信息。

示例 3

unonload 函数事件的输出显示在控制台选项卡中，html 页面的输出显示在网页上。我们可以看到带有 id 对象的 onload 函数。该事件作用于 body 标签和控制台选项卡。它不作用于 alert 函数。

输出

以下输出显示了控制台函数中的 onunload 事件信息。

示例 4

unonload 函数的输出信息显示在控制台选项卡中，而不是在 html 页面上。在这里，我们使用 windows 属性和函数来重新加载浏览器。它在控制台选项卡中工作，但不作用于 alert 函数。

输出

以下输出显示了警报函数中的 onunload 事件信息。

示例 5

html 属性中使用的 onunload 函数并显示为输出。该函数在控制台选项卡中与函数一起工作。

输出

以下输出显示了警报函数中的 onunload 事件信息。

激活 onunload 事件

以下触发器用于在 javascript 中激活 onunload 事件。

• 使用链接或浏览器的直接导航转移到另一个页面。
• 关闭当前选项卡或浏览器窗口。
• 更新当前打开的页面。
• 从 JavaScript 修改 location 对象以更改当前加载页面的 URL。
• 调用 window-to-navigate 技术。
• 使用 document 或 window.open
• 要打开同一个窗口中的文档，请使用 open 技术。

支持的 Web 浏览器

以下是 onunload 事件属性支持的浏览器列表

• 谷歌浏览器
• Edge 版本 12
• Internet Explorer
• Firefox 1
• Safari 版本 3
• Opera 版本 4

结论

onunload 事件触发页面并在页面保持未加载时显示信息。它有助于刷新和重新加载网页或浏览器。