JavaScript监听浏览器关闭及刷新事件beforeunload

myzbx 2025-01-10 15:41 61 浏览

JavaScript 代码添加了一个 beforeunload 事件监听器，提示用户在关闭标签页或浏览器窗口时确认离开，尝试关闭这个标签或浏览器窗口，你会看到提示消息。

写在前面，谷歌浏览器下可能会浏览器安全策略当做恶意弹窗拒绝执行，可以留意下浏览器动态。另外自定义的文案可能不能展示，浏览器会使用默认的弹窗文案。

代码示例如下：很简单的demo，请拿走吧。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Before Unload Example</title>
    <script>
        window.addEventListener('beforeunload', function (e) {
            var confirmationMessage = '你确定要离开这个页面吗？';
            // 标准的处理方式
            e.preventDefault();
            // 设置兼容旧版本的浏览器
            e.returnValue = confirmationMessage;
            return confirmationMessage;
        });
    </script>
</head>
<body>
    <h1>Before Unload Example</h1>
    <p>尝试关闭这个标签或浏览器窗口，你会看到提示消息。</p>
</body>
</html>

关键代码示意：

window.addEventListener('beforeunload', function (e) { ... });：为 beforeunload 事件添加一个监听器，触发时会执行其中的函数。
e.preventDefault();：调用 preventDefault 方法，这是现代浏览器处理 beforeunload 事件的标准方法。
e.returnValue = confirmationMessage;：设置 returnValue 属性，这在某些浏览器中是必须的。
return confirmationMessage;：返回消息，这对于一些浏览器也是必需的，以确保提示消息能够显示。

这段代码做了一些兼容，适配多数浏览器，可以确保大多数情况下都能正确提示用户。

调试效果：

谷歌浏览器-挽留弹窗

火狐浏览器-挽留弹窗

HTML 事件

上一篇：了解JavaScript事件注册的几种方式
下一篇：探索 JavaScript 的事件循环与任务队列，区分宏任务与微任务

JavaScript监听浏览器关闭及刷新事件beforeunload

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿