如何防止关闭浏览器窗口？

前言

在 Web 应用程序中，有时我们需要确保用户不会无意中关闭浏览器窗口。例如，当用户正在填写一个长表单或进行某个重要操作时，如果他们不小心关闭了浏览器，就会丢失所有已经输入的数据。

在这篇文章中，我们将探讨如何使用 JavaScript 防止关闭浏览器窗口，并提供一些实用的代码示例。

方法一：捕获 window.onbeforeunload 事件

在浏览器关闭之前，通常会触发 window.onbeforeunload 事件。通过监听此事件并返回一个字符串，可以提示用户是否真的要关闭浏览器。如果用户点击“取消”，则浏览器将不会关闭。

下面是一个示例代码：

window.addEventListener('beforeunload', function (event) {
  event.preventDefault();
  event.returnValue = '';
});

该代码片段注册了一个 beforeunload 事件处理程序，以防止关闭浏览器窗口。当用户试图关闭浏览器时，将显示一个模态对话框，询问用户是否要离开页面。

但是，在 Chrome 和 Firefox 等现代浏览器中，此方法可能无效，因为现代浏览器已经针对此类滥用进行了保护，使得用户始终可以关闭浏览器。

方法二：使用 Visibility API

另一个防止关闭浏览器窗口的方法是使用 Visibility API。该 API 允许 Web 应用程序检测用户是否正在查看页面，并在用户尝试离开页面时采取适当的措施。

以下是使用 Visibility API 的示例代码：

document.addEventListener('visibilitychange', function() {
  if (document.hidden) {
    // 禁用关闭窗口按钮或执行其他操作
  } else {
    // 启用关闭窗口按钮或执行其他操作
  }
});

该代码片段注册了一个 visibilitychange 事件处理程序，以便在用户尝试离开页面时执行相应的操作。

结论

无论您是选择捕获 window.onbeforeunload 事件还是使用 Visibility API，都需要注意不要对用户造成过多干扰。在某些情况下，例如填写表单时，禁止关闭浏览器可能是有意义的。但是，在其他情况下，可能会给用户带来不必要的麻烦，因此需要慎重考虑。

最后，要注意，在某些情况下，即使启用了这些技术，仍然无法完全防止用户意外关闭浏览器。因此，最好将应用程序设计为自动保存输入数据并具有恢复功能。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14850