JavaScript onunload 事件

当用户尝试加载页面但不成功时，页面保持未加载状态，触发了 JavaScript onunload 事件。还有可能在页面加载时浏览器关闭而触发 onunload 事件。

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

语法

onunload 事件用于在 HTML 页面中使用 JavaScript 函数。HTML 页面和 JavaScript 函数的语法如下所示。

HTML 语法:

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

<element Onunload = "myData"> data </element>

JavaScript语法：

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

object.onunload = function(){
//javascript code.
};

这个属性有一个单一的值 script，当事件 onunload 触发时执行。

在 JavaScript 中 onunload 的示例

下面的示例展示了 onunload 事件及其输出。

示例1

在这个程序中演示了 onunload JavaScript 函数，用户首先使用它调用一个网页进行功能测试，然后尝试关闭窗口以查看函数是否再次加载，最后使用脚本指定的 alert 函数作为输出。

<!DOCTYPE html>
<html>
<head>
<title> JavaScript Onunload Event </title>
</head>
<body onload = "trial_event()">
<h2>JavaScript Onunload Event</h2>
<script>
function trial_event() {
alert("Loading Page is Loaded Successfully");
}
</script>
</body>
</html>

输出

以下输出显示unonload事件信息在alert函数中。

JavaScript onunload 事件

示例2

onunload JavaScript函数在带有控制台方法的示例中起作用。 onunload函数的事件的输出显示在控制台选项卡中，html页面的输出显示在网页上。

<!DOCTYPE html>
<html>
<head>
<title> JavaScript Onunload Event </title>
</head>
<body onload = "trial_event()">
<h2>JavaScript Onunload Event</h2>
<script>
function trial_event() {
console.log("Loading Page is Loaded Successfully");
}
</script>
</body>
</html>

输出

以下输出显示控制台功能中的unonload事件信息。

JavaScript onunload 事件

示例3

卸载函数的事件输出显示在控制台选项卡中，html页面的输出显示在网页上。我们可以看到带有id对象的加载函数。该事件在body标签上与控制台选项卡一起工作。它不适用于警告功能。

<!DOCTYPE html>
<html>
<head>
<title> JavaScript Onunload Event </title>
</head>
<body id ="data">
<h2> JavaScript Onunload Event </h2>
<script>
const data = document.getElementById("data");
data.onunload = function()
{
console.log("Page Loaded Successfully.");
console.log("JavaScript Onunload Event");
}
</script>
</body>
</html>

输出

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

JavaScript onunload 事件

示例4

在控制台标签下显示了有关onunload函数输出的信息，但在HTML页面上没有显示。在这里，我们使用了具有重新加载浏览器功能的窗口属性。它在控制台标签中起作用，但在警报函数上不起作用。

<!DOCTYPE html>
<html>
<head>
<title> JavaScript Onunload Event </title>
</head>
<body id = "data">
<h2> JavaScript Onunload Event </h2>
<script>
window.onunload = (event) => {
alert('The page is unloaded');
    console.log('The page is unloaded');
};
</script>
</body>
</html>

输出

下面的输出在alert函数中显示unonload事件的信息。

JavaScript onunload 事件

示例5

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

<!DOCTYPE html>
<html>
<head>
<title> JavaScript Onunload Event </title>
</head>
<body id = "data" onunload = "console.log('JavaScript Onunload Event. \n Page is unloaded Successfully')">
<h2> JavaScript Onunload Event </h2>
</body>
</html>

输出

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

JavaScript onunload 事件