在前端开发中，我们经常需要捕获用户关闭页面的事件，并执行一些清理工作。通常情况下，我们使用 onbeforeunload 事件来实现这个功能。但是，由于浏览器对这个事件的限制，它可能会弹出一个默认的对话框，询问用户是否要离开页面。在某些情况下，我们可能希望自定义这个对话框或者完全替换掉它。
onbeforeunload 的问题
首先，让我们看一下 onbeforeunload 的问题。该事件是在文档即将卸载时触发的，可以用来检查页面是否有未保存的更改、提示用户正在离开等操作。但是，当我们尝试通过 JavaScript 改变页面内容时，浏览器会弹出一个确认框，询问用户是否真的要离开页面。这个对话框不仅令人困扰，而且无法自定义样式和内容。
--------------------------------------- -------- --- - -- ------ --- ----- ------------------- -- ------ -------- ----------- -- -- --- ------------- - --- ---
自定义对话框
如果你想自定义 onbeforeunload 事件弹出的对话框，你可以使用 window.onbeforeunload 属性来覆盖默认的对话框。但是，这个属性只能设置一个字符串作为对话框的内容，并且不能添加自定义样式或交互。
--------------------- - ---------- - ------ ---- --- ---- --- ---- -- -------- -
要实现更高度的自定义，我们需要使用 window.addEventListener 方法监听 beforeunload 事件，然后手动弹出一个自己定义的对话框。
--------------------------------------- ----------- -
------------------- -- ------
----- ------------------- - --- --- ------ ---- -- ----- --- ------- -- -------
------------- - -------------------- -- -------
----- ----- - ------------------------------
--------------- - --------------- -- ------
--------------- - -
---- ---------------------
----------------------
------
---- -------------------
------- --------------------------------------
------- --------------------------------
------
--
----- -------- - ----------------------------------
---------------------------------- ---------- -
------------------------------------------ ---------------------
------------- - -----------------------------------
---
----- ----------- - -------------------------------------
------------------------------------- ---------- -
---------------
---
---------------------------------
------ --------------------
---如上代码所示，我们首先取消了默认的确认框弹窗，然后创建了一个自定义的对话框。这个对话框有两个按钮，一个是继续浏览按钮，另一个是离开页面按钮。当用户点击离开页面按钮时，我们需要先删除 beforeunload 事件的监听器，然后再跳转到目标页面。
完全替换掉默认的对话框
如果你想完全替换掉默认的 onbeforeunload 对话框，你可以使用 addEventListener 方法，在 unload 事件中执行一些清理工作，并且不返回任何值。在该方法中，你可以执行一些异步操作，例如向服务器发送请求或者保存数据，以确保在页面卸载之前完成所有必要的工作。
--------------------------------- ---------- - -- -- ---- ----- -- ---- ---
需要注意的是，由于该事件没有默认行为，因此它不会弹出确认框。但是
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/8499