JavaScript beforeunload 事件

摘要：在本教程中，您将学习 JavaScript 的 beforeunload 事件，该事件允许您在用户离开网页之前显示确认对话框。

JavaScript beforeunload 事件简介

在网页及其资源卸载之前，会触发 beforeunload 事件。此时，网页仍然可见，您有机会取消事件。

要注册 beforeunload 事件，您使用 window.addEventListener() 方法

window.addEventListener('beforeunload',(event) =>{
    // do something here
});Code language: JavaScript (javascript)

由于 window 是全局对象，您可以像这样省略它

addEventListener('beforeunload',(event) =>{
    // do something here
});Code language: PHP (php)

如果网页具有 beforeunload 事件监听器，并且您要离开页面，则 beforeunload 事件将触发一个确认对话框，以确认您是否要离开页面。

如果确认，浏览器将导航到新页面。否则，它将取消导航。

根据规范，您需要在 beforeunload 事件处理程序中调用 preventDefault() 方法以显示确认对话框。但是，并非所有浏览器都实现了这一点。

addEventListener('beforeunload',(event) => {
    event.preventDefault();
});Code language: PHP (php)

从历史上看，一些浏览器允许您在确认对话框中显示自定义消息。这是为了告知用户，如果他们导航离开，他们将丢失数据。不幸的是，此功能经常被用于欺骗用户。因此，不再支持自定义消息。

根据 HTML 规范，对 alert()、confirm() 和 prompt() 的调用在 beforeunload 事件处理程序中被忽略。

JavaScript beforeunload 事件示例

以下示例将事件处理程序附加到 beforeunload 事件。如果单击链接以导航到另一个页面，浏览器将显示确认对话框。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS beforeunload Event</title>
</head>

<body>
    <a href="https://tutorial.javascript.ac.cn/">JavaScript Tutorial</a>
    <script>
        window.addEventListener('beforeunload', (event) => {
            event.preventDefault();
            // Google Chrome requires returnValue to be set.
            event.returnValue = '';
        });
    </script>
</body>

</html>Code language: HTML, XML (xml)

摘要

beforeunload 事件在网页及其资源即将卸载之前触发。
使用 beforeunload 确认用户是否要离开页面以防止数据丢失。

测验

本教程是否有帮助？