简介
在前端开发中，我们常常需要处理页面关闭时的相关事件。其中，window.onbeforeunload 和 window.onunload 是两个常用的事件，它们分别在页面即将关闭和已经关闭时触发。但是有些开发者会遇到一个问题：这两个事件在 Firefox、Safari 和 Opera 浏览器中似乎无法正常工作。本文将对此进行详细的说明，并给出解决方案。
问题描述
在 Firefox、Safari 和 Opera 浏览器中，当页面要被卸载时，浏览器并不会像其他浏览器一样触发 window.onbeforeunload 和 window.onunload 事件。这意味着，如果你想在这些浏览器中实现类似于弹窗提醒或清理操作等功能，就不能使用这两个事件。
原因分析
为了保护用户隐私和安全，Firefox、Safari 和 Opera 浏览器都采取了一种叫做“页面恢复”的机制。当用户关闭一个页面时，浏览器会在后台自动保存一份该页面的状态信息，以便用户下次访问时能够恢复该页面的状态。这就是为什么当用户重新打开一个关闭过的标签页或浏览器窗口时，可以看到之前浏览过的页面和输入框中的内容还原的原因。
由于这种机制的存在，Firefox、Safari 和 Opera 浏览器在关闭页面时不会触发 window.onbeforeunload 和 window.onunload 事件，以免影响页面状态的自动保存和恢复功能。
解决方案
如果你需要在 Firefox、Safari 和 Opera 浏览器中实现类似于弹窗提醒或清理操作等功能，可以考虑使用 window.addEventListener 方法来监听 beforeunload 和 unload 事件。这两个事件同样可以在页面即将关闭和已经关闭时触发，而且在大多数浏览器中都能正常工作。
下面是一个示例代码：
-- -------------------- ---- ------- -- -- ------------ -- --------------------------------------- --------------- - -- --------- --- -- -- ------ -- --------------------------------- --------------- - -- --------- ---
需要注意的是，在 beforeunload 事件中，如果要显示弹窗提醒用户是否确认离开当前页面，需要返回一个字符串类型的值。这个字符串将被显示在弹窗的提示信息中。例如：
window.addEventListener('beforeunload', function(event) {
event.returnValue = '确定要离开本页面吗？';
});总结
本文详细解释了为什么 window.onbeforeunload 和 window.onunload 事件在 Firefox、Safari 和 Opera 浏览器中无法正常工作，给出了使用 window.addEventListener 方法监听 beforeunload 和 unload 事件的解决方案。希望能对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12988
