有没有办法在 iOS 设备的 Mobile Safari 上使用 window.onbeforeunload ？

Question

看起来 Apple 已禁用 iOS 设备（iPhone、iPad、iPod Touch）的 window.onbeforeunload 事件。不幸的是，我找不到任何文档来说明为什么此事件在 Mobile Safari 中不起作用。

有谁知道这个功能是否有可靠的替代方案？ Android 的浏览器似乎支持得很好，Safari 桌面应用程序也支持 onbeforeunload 事件，没有任何问题。

Answer 1

我发现这是一个老问题，但我最近遇到了这个问题。

我正在使用 window.unload 并且它在 ios 浏览器中运行良好（尽管如果您查看 Apple 文档 似乎已弃用，他们建议使用 window.pagehide）

Answer 2

如果你确实需要它，你不能只获取所有具有更改 url 的处理程序的链接、表单和 DOM 对象，并让它们等待，直到你完成你想要的操作。
对于链接，您可以通过 getElementsByTagName 获取它们，检查 href 是否以 # 以外的任何内容开头，然后添加 onbeforeunload 函数 add onclick （该函数将在查看 href 之前调用）。
表单相同，但带有 onsubmit。
最后，对于使用 JavaScript 更改 href 的元素，您应该确保在添加 lsitener 时调用 onbeforeunlaod 函数（或者，如果您使用 DOM0 或 DOM1 侦听器，则只需添加一些类，然后使用全局脚本检查该类的所有元素并将其添加到带有闭包的事件侦听器中，

但是您通常应该能够避免使用此事件（可能使用 cookie 来存储您想要每 x 秒发送的内容并允许，在最坏的情况下，下次用户加载页面时查看它，在最好的情况下，能够在 onbeforeunload 或 onunload 处发送 Ajax 请求，即使它只发送 http 标头，也将允许您得到你想要的）。

Answer 3

根据泽维尔的回答，我设计了一个解决方案：

function doStuff() {
  // here goes your logic
}

function isSafariMobile() {
  return navigator && /Safari/.test(navigator.userAgent) && /iPhone|iPad/.test(navigator.userAgent)
}

function addWatcherToLinks(baseNode) {
  if (!baseNode || !baseNode.querySelectorAll) { return; } // ignore comments, text, etc.
  for (const link of baseNode.querySelectorAll("a")) {
    link.addEventListener('click', doStuff);
  }
  for (const form of baseNode.querySelectorAll("form")) {
    form.addEventListener('submit', doStuff);
  }
}

// ...when the page loads...
// we watch the page for beforeunload to call doStuff
// Since Safari mobile does not support this, we attach a listener (watcher) to each link and form and then call doStuff.
// Also, we add such a watcher to all new incoming nodes (DOMNodeInserted).
if (isSafariMobile()) {
  addWatcherToLinks(document);
  window.addEventListener("DOMNodeInserted", (event) => { addWatcherToLinks(event.target); }, false);
} else {
  window.addEventListener('beforeunload', doStuff);
}

该解决方案有一些限制。最大的一个是它附加到所有表单和所有链接。有时这可能不是所希望的。如果您需要它，您可以跳过一些节点（例如，使用特定的 data- 属性标记它们）。

Answer 4

我也遇到了同样的问题。似乎 iPhone 中的 Safari 浏览器仅触发焦点和模糊事件，几乎所有其他事件都不会触发，例如（页面隐藏、页面显示、可见性更改），但好消息是焦点和模糊事件在 iphone、ipad 和 iphone 上都受支持和触发。安卓手机也是如此。

    window.addEventListener('focus', function(){
       // do stuff
     });

   window.addEventListener('blur', function(){
       // do stuff
     });

希望这对任何人都有帮助。