前言
在 Web 应用程序中，有时我们需要确保用户不会无意中关闭浏览器窗口。例如，当用户正在填写一个长表单或进行某个重要操作时，如果他们不小心关闭了浏览器，就会丢失所有已经输入的数据。
在这篇文章中，我们将探讨如何使用 JavaScript 防止关闭浏览器窗口，并提供一些实用的代码示例。
方法一：捕获 window.onbeforeunload 事件
在浏览器关闭之前，通常会触发 window.onbeforeunload 事件。通过监听此事件并返回一个字符串，可以提示用户是否真的要关闭浏览器。如果用户点击“取消”，则浏览器将不会关闭。
下面是一个示例代码：
--------------------------------------- -------- ------- - ----------------------- ----------------- - --- ---
该代码片段注册了一个 beforeunload 事件处理程序，以防止关闭浏览器窗口。当用户试图关闭浏览器时，将显示一个模态对话框，询问用户是否要离开页面。
但是，在 Chrome 和 Firefox 等现代浏览器中，此方法可能无效，因为现代浏览器已经针对此类滥用进行了保护，使得用户始终可以关闭浏览器。
方法二：使用 Visibility API
另一个防止关闭浏览器窗口的方法是使用 Visibility API。该 API 允许 Web 应用程序检测用户是否正在查看页面，并在用户尝试离开页面时采取适当的措施。
以下是使用 Visibility API 的示例代码：
--------------------------------------------- ---------- -
-- ----------------- -
-- ---------------
- ---- -
-- ---------------
-
---该代码片段注册了一个 visibilitychange 事件处理程序，以便在用户尝试离开页面时执行相应的操作。
结论
无论您是选择捕获 window.onbeforeunload 事件还是使用 Visibility API，都需要注意不要对用户造成过多干扰。在某些情况下，例如填写表单时，禁止关闭浏览器可能是有意义的。但是，在其他情况下，可能会给用户带来不必要的麻烦，因此需要慎重考虑。
最后，要注意，在某些情况下，即使启用了这些技术，仍然无法完全防止用户意外关闭浏览器。因此，最好将应用程序设计为自动保存输入数据并具有恢复功能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/14850