阻止关闭或刷新浏览器?分享 1 段优质 JS 代码片段!

798 阅读2分钟

本内容首发于工粽号:程序员大澈,每日分享一段优质代码片段,欢迎关注和投稿!

大家好,我是大澈!

本文约 700+  字,整篇阅读约需 1 分钟。

今天分享一段优质 JS 代码片段,实现在关闭或刷新浏览器窗口时做提示。

老规矩,先阅读代码片段并思考,再看代码解析再思考,最后评论区留下你的见解!

window.addEventListener('beforeunload'function (event) {
    const confirmationMessage = "确定要离开此页面吗?您所做的更改可能不会被保存。";
 
    event.preventDefault();
    event.returnValue = confirmationMessage; 

    return confirmationMessage;
});

分享原因

这段代码展示了如何使用 JavaScript 的 beforeunload 事件来提示用户在关闭或刷新浏览器窗口时确认操作,从而避免意外的数据丢失或操作中断。

这种方法适用于 未保存的数据(如填写表单或编辑文档)、长时间操作(如文件上传或大规模数据处理)、敏感操作(如在线交易或重要系统设置)等场景。

项目中用到时直接CV,但对于用户体验而言,不宜过度使用。

代码解析

1. window.addEventListener('beforeunload', function (event) { ... })

为 window 对象添加一个 beforeunload 事件监听器。

当用户试图关闭或刷新浏览器窗口时,此事件将被触发。

2. event.preventDefault();

调用 event.preventDefault() 方法来阻止默认的浏览器行为。

在大多数情况下,这一步是冗余的,因为 beforeunload 事件默认不会执行任何动作,但这可以确保兼容性。

3. event.returnValue = confirmationMessage;

设置 event.returnValue 为 confirmationMessage 提示信息。

这是确保在大多数现代浏览器中显示确认对话框的关键步骤。

4. return confirmationMessage;

返回 confirmationMessage 提示信息。

在一些旧版浏览器中,这一步是必要的,以确保显示提示信息。