当我们在 Web 应用程序中需要处理页面关闭或导航时，通常会使用 window.onbeforeunload 事件。然而，在 Mobile Safari 上，这个事件的行为与桌面浏览器有所不同。
具体而言，当用户尝试关闭或导航离开页面时，Mobile Safari 不会显示默认警告消息（"Are you sure you want to leave this page?"），并且不支持自定义警告消息。相反，它仅仅简单地禁止了事件的默认操作，例如关闭窗口或导航到其他网页。
那么，如何在 Mobile Safari 上实现类似于桌面浏览器中的 onbeforeunload 行为呢？以下是一些可行的方法：
使用 Page Visibility API
Page Visibility API 允许您检测当前页面是否对用户隐藏，以及是否处于前台或后台状态。在 Mobile Safari 中，如果用户尝试导航到其他应用程序或屏幕锁定，则页面将被隐藏。因此，您可以使用 Page Visibility API 模拟 onbeforeunload 行为，并执行必要的清理操作。
document.addEventListener("visibilitychange", function() {
if (document.visibilityState === "hidden") {
// 用户正在离开页面，执行必要的清理操作
}
});使用 touchmove 事件
另一种方法是使用 touchmove 事件来模拟 onbeforeunload 行为。在 Mobile Safari 中，当用户尝试滚动页面时，touchmove 事件会被触发。因此，您可以使用 touchmove 事件来检测用户是否正在尝试离开页面，并执行必要的清理操作。
-- -------------------- ---- -------
--- ---------- - ------
------------------------------------ ---------- -
---------- - -----
---
--------------------------------------- --------------- -
-- ------------- -
-- ------------------
-
---使用导航事件
最后，您可以使用导航事件（例如 beforeunload、unload 或 visibilitychange）来检测用户是否正在尝试离开页面，并执行必要的清理操作。请注意，在某些情况下，这些事件可能不会触发或延迟触发，因此您需要权衡使用它们的利弊。
-- -------------------- ---- ------- --------------------------------------- --------------- - -- --------- --------------------- -- --- --------------------------------- --------------- - -- ------------- --- --------------------------------------------- ---------- - -- ---- ------------ ---------------- ---
综上所述，虽然 Mobile Safari 不支持 onbeforeunload 事件的默认行为和自定义警告消息，但我们仍然可以使用其他技术来模拟类似的行为。在实现时，我们应该根据具体情况选择最适合的方法，并且要注意事件触发的时机和延迟性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26053