onbeforeunload该事件在火狐、谷歌中默认不生效，除非你打开控制台。
可以间接实现，监听页面中输入框是否有值，如果有，则触发，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="text" id="name"> <script> const beforeUnloadListener = (event) => { event.preventDefault(); return event.returnValue = "Are you sure you want to exit?"; }; const nameInput = document.querySelector("#name"); nameInput.addEventListener("input", (event) => { if (event.target.value !== "") { addEventListener("beforeunload", beforeUnloadListener, {capture: true}); } else { removeEventListener("beforeunload", beforeUnloadListener, {capture: true}); } }); </script> </body> </html>
效果：
原理：
beforeunload当窗口、文档及其资源即将被卸载时触发该事件。文档仍然可见，此时事件仍然可以取消。
此事件使网页能够触发确认对话框，询问用户是否真的要离开该页面。如果用户确认，浏览器导航到新页面，否则取消导航。
如果将事件直接绑定到window或body中，则在谷歌和火狐中不会触发，因为用户可能与页面没有任何交互，浏览器会忽略，就像浏览器不支持自动播放音视频那样，这时可以在页面中添加一个输入框，然后事件监听该输入框，如果输入框值为空，再触发该事件。
使用说明
该beforeunload事件遭受与该事件相同的问题unload。
特别是在移动设备上，beforeunload事件不会被可靠地触发。例如，beforeunload在以下场景中根本不会触发事件：
- 移动用户访问您的页面。
- 然后用户切换到不同的应用程序。
- 稍后，用户从应用管理器关闭浏览器。
建议开发者beforeunload只在这种场景下监听，并且只有在实际有未保存的更改时才监听，以尽量减少对性能的影响。
