在 Web 开发中，我们通常使用 onbeforeunload 事件来检测用户离开页面的行为并执行相应的操作。但是，对于移动 Safari 浏览器而言，这个事件会出现一些问题。在 iOS13+ 的版本中，Safari 浏览器已经禁用了该事件，因此我们需要寻找替代方法。
问题描述
在桌面浏览器中，我们可以很容易地使用 window.onbeforeunload 来监听页面的关闭或刷新事件。但是，在移动 Safari 浏览器中，这个事件不再被支持。如果你尝试在移动设备上使用 window.onbeforeunload，就会发现它不会起作用。
--------------------- - ---------- - ------ -------------------- -
在移动 Safari 浏览器中，上述代码不会触发提示信息，用户可以轻松地关闭当前页面。
解决方案
在移动 Safari 中，我们可以使用 pagehide 事件来模拟 onbeforeunload 事件。
----------------------------------- ---------- -
--- ---- - -----------------------------------
-- ---------------------------------- -
-- ----------------------- -
----------------------- ----- ---------------
-
-
---上述代码中，我们首先监听 pagehide 事件，然后检查当前页面表单是否有未保存的更改。如果有未保存的更改，我们将显示提示信息让用户确认是否离开当前页面。
深入探讨
在 iOS13+ 版本中，Safari 浏览器禁用了 onbeforeunload 事件，这是为了防止一些恶意网站滥用该事件来欺骗用户。但对于某些 Web 应用程序而言，这个事件仍然非常重要，因此我们需要寻找其他解决方案。
pagehide 事件是一个比较好的替代方案，它可以在用户即将离开页面时触发，并允许我们执行相关操作。但是，需要注意的是，pagehide 事件并不是专门为模拟 onbeforeunload 事件设计的，它可能会在其他情况下被触发，例如用户打开了一个新的标签页或切换到其他应用程序。因此，在使用 pagehide 事件时，我们需要仔细考虑各种可能性，并确保我们的代码可以处理这些情况。
总结
虽然在移动 Safari 中无法直接使用 onbeforeunload 事件，但我们可以使用 pagehide 事件来模拟其行为。通过深入探讨 pagehide 事件的工作原理以及相关注意事项，我们可以更好地理解如何在移动 Safari 浏览器中实现类似的功能。
示例代码：
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27107