深入解析如何监听浏览器的页面关闭事件

🤍 前端开发工程师、技术日更博主、已过CET6

🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1

🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》

🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

- 摘要
- 一、引言
- 二、在浏览器中监听页面关闭事件的方法
- - [2.1 beforeunload 事件](#2.1 beforeunload 事件)
  - [2.2 unload 事件](#2.2 unload 事件)
  - [2.3 pageshow 和 pagehide 事件](#2.3 pageshow 和 pagehide 事件)
- [三、在 Vue 等框架中监听页面关闭事件](#三、在 Vue 等框架中监听页面关闭事件)
- 四、总结

摘要

在 Web 开发中，监听浏览器的页面关闭事件是一项重要的功能需求，它能够让开发者在页面即将关闭或刷新时执行一些必要的操作，如保存用户未提交的数据、关闭打开的连接等。本文将详细介绍在不同场景下监听页面关闭事件的方法，并通过示例代码进行演示，帮助开发者更好地掌握这一技术。

一、引言

随着 Web 应用的功能日益复杂，用户在使用过程中可能会产生一些临时数据或处于特定的状态。当用户关闭浏览器页面或刷新页面时，为了保证数据的完整性和用户体验，我们需要监听页面关闭事件，以便在合适的时机执行相应的逻辑，例如保存用户的输入、清理资源等。

二、在浏览器中监听页面关闭事件的方法

2.1 beforeunload 事件

beforeunload 事件在页面即将卸载（包括关闭页面、刷新页面、跳转页面等情况）时触发。它允许开发者向用户显示一个确认对话框，询问用户是否真的要离开当前页面。

示例代码如下：

html 复制代码

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

<head>
    <meta charset="UTF-8">
    <title>监听页面关闭事件</title>
</head>

<body>
    <script>
        window.addEventListener('beforeunload', function (event) {
            // 可以在这里添加需要在页面卸载前执行的逻辑，例如保存数据
            // 这里只是简单地设置一个提示信息
            const message = '您确定要离开此页面吗？';
            event.returnValue = message;
            return message;
        });
    </script>
</body>

</html>

在上述代码中，通过 window.addEventListener('beforeunload', callback) 方法监听了 beforeunload 事件。当事件触发时，回调函数会被执行，在回调函数中设置了 event.returnValue，这样浏览器会弹出一个确认对话框，显示我们设置的提示信息，用户可以选择离开或继续留在当前页面。

需要注意的是，不同浏览器对于 beforeunload 事件的处理略有差异。在现代浏览器中，显示的确认对话框内容是固定的，我们设置的 message 只是作为一个参考信息，并且有些浏览器可能会简化这个对话框的显示。

2.2 unload 事件

unload 事件在页面已经开始卸载，即将被关闭或刷新时触发。与 beforeunload 事件不同的是，unload 事件不能阻止页面的卸载，它主要用于执行一些清理操作，如关闭打开的 WebSocket 连接、清除定时器等。

示例代码如下：

html 复制代码

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

<head>
    <meta charset="UTF-8">
    <title>监听页面关闭事件</title>
</head>

<body>
    <script>
        window.addEventListener('unload', function () {
            // 在这里执行页面卸载时的清理操作
            // 例如关闭 WebSocket 连接
            const socket = new WebSocket('ws://example.com');
            socket.close();
            // 清除定时器
            const timer = setInterval(() => {
                console.log('定时任务');
            }, 1000);
            clearInterval(timer);
        });
    </script>
</body>

</html>

在这个示例中，当 unload 事件触发时，代码会关闭创建的 WebSocket 连接，并清除已经设置的定时器。由于页面已经处于卸载过程中，此时进行的操作可能不会立即在页面上看到效果，但相关的资源会被正确清理。

2.3 pageshow 和 pagehide 事件

pageshow 和 pagehide 事件与页面的加载和卸载相关，并且它们可以感知到页面在浏览器历史记录中的前进和后退操作。pagehide 事件在页面被隐藏（例如用户点击后退按钮）时触发，pageshow 事件在页面被显示（例如用户点击前进按钮）时触发。

示例代码如下：

html 复制代码

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

<head>
    <meta charset="UTF-8">
    <title>监听页面关闭事件</title>
</head>

<body>
    <script>
        window.addEventListener('pagehide', function () {
            // 页面被隐藏时执行的逻辑
            console.log('页面被隐藏');
        });

        window.addEventListener('pageshow', function () {
            // 页面被显示时执行的逻辑
            console.log('页面被显示');
        });
    </script>
</body>

</html>

通过监听这两个事件，开发者可以在页面的显示和隐藏过程中执行一些特定的操作，例如恢复页面的状态或保存当前页面的状态信息。

三、在 Vue 等框架中监听页面关闭事件

在 Vue 框架中，我们可以在组件的生命周期钩子函数中结合上述事件监听方法来实现页面关闭事件的监听。

例如，在 Vue 组件中监听 beforeunload 事件：

vue 复制代码

<template>
    <div>
        <p>这是一个 Vue 组件</p>
    </div>
</template>

<script>
export default {
    mounted() {
        window.addEventListener('beforeunload', this.handleBeforeUnload);
    },
    beforeDestroy() {
        window.removeEventListener('beforeunload', this.handleBeforeUnload);
    },
    methods: {
        handleBeforeUnload(event) {
            const message = '您确定要离开此页面吗？';
            event.returnValue = message;
            return message;
        }
    }
};
</script>

在上述 Vue 组件中，在 mounted 钩子函数中添加了 beforeunload 事件的监听，在 beforeDestroy 钩子函数中移除了事件监听，以确保事件监听的正确添加和移除，避免内存泄漏。

四、总结

监听浏览器的页面关闭事件在 Web 开发中具有重要的作用，通过合理使用 beforeunload、unload、pageshow 和 pagehide 等事件，开发者可以在页面即将关闭或状态发生变化时执行相应的操作，从而提升用户体验和保证数据的完整性。在实际应用中，需要根据具体的业务需求和场景选择合适的事件进行监听，并注意事件的添加和移除，以确保代码的健壮性和性能。