应用场景

大部分情况是，在表单编辑页面，或者一些用户交互性比较强的页面，我们希望当用户刷新或关闭页面的时候，能够弹出一个确认对话框，询问用户是否真的要离开该页面。
如果用户选择确认离开，浏览器将关闭或者刷新页面，否则就保持停留在当前页面。

beforeunload 原理

关键概念：当浏览器窗口关闭或者刷新的时候会触发 beforeunload 事件，但是不会自动触发弹出确认对话框。
然而，触发弹出确认对话框，可以有效防止用户误操作导致数据丢失。
那么如何触发呢，请看下文。

触发方式

触发弹出确认对话框有以下两种方式：

标准的触发方式：在 beforeunload 事件中执行 event.preventDefault()。（推荐）
对于某些旧的浏览器，需要在 beforeunload 事件中设置 event.returnValue 的值来触发，值的格式：
- 空字符串，如：event.returnValue = ‘’
- 非空字符换（开发者自定义提示内容），如：event.returnValue = ‘开发者自定义的提示内容’。

注意：设置 event.returnValue 这种方式兼容性差，目前的浏览器基本不支持，需要谨慎使用。

触发条件

为避免意外弹出窗口，仅在用户与页面产生交互（如点击、输入）后，才会触发。否则浏览器可能不会显示在 beforeunload 事件中创建的提示，甚至根本不会显示它们。

示例代码

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

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

<body>
    <input id="inputField" />

    <script>
        let isModified = false;
        document.getElementById('inputField').addEventListener('input', () => {
            isModified = true;
        });
        window.addEventListener('beforeunload', (event) => {
            if (isModified) {
                event.preventDefault(); // 必须调用
                event.returnValue = ''; // 旧浏览器需要非空字符串
            }
        });
    </script>
</body>

</html>

注意事项

在该事件中调用 alert()、confirm() 、prompt()可能会失效。
处理函数应轻量，避免耗时操作。
避免在单页应用路由切换中使用（需用路由库的钩子）。

实践总结

最新版的chrome、Edge、Safari都使用标准方式触发确认框即可。
实践触发操作描述：
- 在首次打开页面，刷新或关闭之前；
- 与页面交互（如点击页面、表单输入、按钮点击等）使得页面获得焦点，
- 刷新或关闭才会触发。
- 即便页面获得焦点后，切换到浏览器其它标签页，关闭也会触发。

WEB程序开发笔记

【实践分享】通过beforeunload实现刷新或关闭页面时弹出确认对话框

应用场景

beforeunload 原理

触发方式

触发条件

示例代码

注意事项

实践总结

文章归档

推荐文章

热门标签

友情链接