在前端开发中，我们经常需要在用户关闭浏览器窗口或者刷新页面时执行一些清理工作。比如说保存表单数据、断开 WebSocket 连接、清除定时器等。
本文将介绍两种实现方式：使用 beforeunload 事件和使用 unload 事件。
使用 beforeunload 事件
beforeunload 事件在用户正在离开当前页面时触发，可以用于提示用户是否保存修改或者进行一些数据清理操作。当用户点击确定按钮时，页面将会被卸载并关闭。
--------------------------------------- --------------- - ----------------------- ----------------- - --- -- ------ ---
上面的代码中，我们通过 preventDefault() 阻止默认的页面卸载行为，并设置 returnValue 属性为空字符串表示弹出提示框时不显示任何文本。
需要注意的是，由于 beforeunload 事件可能被滥用，浏览器对其进行了安全限制。在 Chrome 和 Firefox 中，只有在事件处理函数返回非空字符串时，才会弹出提示框。
使用 unload 事件
unload 事件在页面即将被卸载时触发，可以用于执行一些清理操作。与 beforeunload 不同的是，unload 事件不会弹出提示框，直接关闭页面。
--------------------------------- ---------- - -- ------ ---
需要注意的是，由于 unload 事件在页面即将被卸载时触发，而页面上的资源可能还没有被完全加载完成。如果需要对某个资源进行清理操作，需要确保该资源已经被加载完毕。
示例代码
下面是一个示例代码，用于保存表单数据和断开 WebSocket 连接。
--------------------------------------- --------------- -
-----------------------
----------------- - ---
-- ------
----- -------- - --- ----------------------------
-------------------------------- --------------------------------------------------------
-- -- --------- --
-- ------- -- ----------------- --- --------------- -
---------------
-
---
--------------------------------- ---------- -
-- ---------
------------------------------------
---上面的代码中，我们使用了 localStorage 保存表单数据，当用户刷新或者关闭页面时会自动保存。同时，如果存在 WebSocket 连接，也会在页面关闭前断开连接。在页面再次打开时，可以从 localStorage 中恢复表单数据。
总结
本文介绍了两种在窗口关闭或页面刷新时运行 JavaScript 代码的方式：使用 beforeunload 事件和使用 unload 事件。需要注意的是，由于浏览器的安全限制，beforeunload 事件可能需要返回非空字符串才能弹出提示框。同时，在使用 unload 事件时需要确保页面上的资源已经被完全加载完成。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/12836