在移动 Safari 中有没有使用 onbeforeunload 的替代方法？

在 Web 开发中，我们通常使用 onbeforeunload 事件来检测用户离开页面的行为并执行相应的操作。但是，对于移动 Safari 浏览器而言，这个事件会出现一些问题。在 iOS13+ 的版本中，Safari 浏览器已经禁用了该事件，因此我们需要寻找替代方法。

问题描述

在桌面浏览器中，我们可以很容易地使用 window.onbeforeunload 来监听页面的关闭或刷新事件。但是，在移动 Safari 浏览器中，这个事件不再被支持。如果你尝试在移动设备上使用 window.onbeforeunload，就会发现它不会起作用。

window.onbeforeunload = function() {
  return "离开本页面将会导致未保存的数据丢失";
}

在移动 Safari 浏览器中，上述代码不会触发提示信息，用户可以轻松地关闭当前页面。

解决方案

在移动 Safari 中，我们可以使用 pagehide 事件来模拟 onbeforeunload 事件。

window.addEventListener("pagehide", function() {
  var form = document.getElementById("my-form");
  if (form.classList.contains("dirty")) {
    if (!confirm("您是否要离开本页？")) {
      history.pushState(null, null, location.href);
    }
  }
});

上述代码中，我们首先监听 pagehide 事件，然后检查当前页面表单是否有未保存的更改。如果有未保存的更改，我们将显示提示信息让用户确认是否离开当前页面。

深入探讨

在 iOS13+ 版本中，Safari 浏览器禁用了 onbeforeunload 事件，这是为了防止一些恶意网站滥用该事件来欺骗用户。但对于某些 Web 应用程序而言，这个事件仍然非常重要，因此我们需要寻找其他解决方案。

pagehide 事件是一个比较好的替代方案，它可以在用户即将离开页面时触发，并允许我们执行相关操作。但是，需要注意的是，pagehide 事件并不是专门为模拟 onbeforeunload 事件设计的，它可能会在其他情况下被触发，例如用户打开了一个新的标签页或切换到其他应用程序。因此，在使用 pagehide 事件时，我们需要仔细考虑各种可能性，并确保我们的代码可以处理这些情况。

总结

虽然在移动 Safari 中无法直接使用 onbeforeunload 事件，但我们可以使用 pagehide 事件来模拟其行为。通过深入探讨 pagehide 事件的工作原理以及相关注意事项，我们可以更好地理解如何在移动 Safari 浏览器中实现类似的功能。

示例代码：

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