window.onbeforeunload 在 iPad 上不起作用？答案

【问题标题】：window.onbeforeunload not working on the iPad?window.onbeforeunload 在 iPad 上不起作用？
【发布时间】：2011-03-15 11:12:41
【问题描述】：

有谁知道 iPad 是否支持 onbeforeunload 事件和/或是否有不同的使用方式？

我几乎尝试了所有方法，但似乎从未在 iPad（Safari 浏览器）上触发 onbeforeunload 事件。

具体来说，这是我尝试过的：

window.onbeforeunload = function(event) { event.returnValue = 'test'; }
window.onbeforeunload = function(event) { return 'test'; }
（以上两者一起）
window.onbeforeunload = function(event) { alert('test')'; }
（上述所有函数，但在<body onbeforeunload="...">内

所有这些都适用于 PC 上的 FF 和 Safari，但不适用于 iPad。

另外，我在加载页面后做了以下操作：

alert('onbeforeunload' in window);
alert(typeof window.onbeforeunload);
alert(window.onbeforeunload);

分别是：

true
object
null

因此，浏览器确实具有该属性，但由于某种原因它没有被触发。

我尝试离开页面的方法是单击后退和前进按钮、在顶部栏中进行谷歌搜索、更改地址栏中的位置以及单击书签。

有人知道发生了什么吗？非常感谢任何意见。

谢谢

【问题讨论】：

感谢两位的意见。这一定是你提到的原因之一。不幸的是，Apple 没有关于此限制和其他限制的官方文档。希望他们能想出一种更有创意的方式来启用此功能，同时防止恶意使用它。我经常听到人们不小心点击离开页面并丢失了他们在表单中输入的所有数据。
您是否尝试过使用addEventListener()？
我很确定 beforeunload 在 iOS 上的 Safari 上不起作用。 :-( 也许不是你要找的东西，但我有一个关于如何reliably test for a working beforeunload 的建议
2016 年 3 月 3 日，window.onbeforeunload = function(event) { event.returnValue = 'test'; } 不适用于 iOS 9.2.1 的 Chrome 和 Safari。我很喜欢onbeforeunload 因为点击取消后页面没有变化。
看来这个问题在 Safari 和 iOS 13 中已经解决了

标签： javascript ios ipad onbeforeunload

【解决方案1】：

这段 JavaScript 适用于我在 ipad 和 iphone 上的 Safari 和 Chrome，以及台式机/笔记本电脑/其他浏览器：

var isOnIOS = navigator.userAgent.match(/iPad/i)|| navigator.userAgent.match(/iPhone/i);
var eventName = isOnIOS ? "pagehide" : "beforeunload";

window.addEventListener(eventName, function (event) { 
    window.event.cancelBubble = true; // Don't know if this works on iOS but it might!
    ...
} );

【讨论】：

可以捕捉到事件，但是怎么弹出确认提示呢？使用类似于 op 的 return 'test'; 不起作用..
谢谢我在原始问题中错过了这一点。我没有在 iOS 上专门测试过这个，但可能添加这个额外的行会起作用：window.event.cancelBubble = true;我将添加到我的答案中
谢谢，但遗憾的是它不起作用...我尝试将 alert() 放入其中，似乎在触发 alert() 之前新页面已开始加载。另请参阅：stackoverflow.com/questions/3239834/…
@user2335065 你有没有找到任何解决方案。
小伙伴们，你们有没有找到任何解决方案在离开页面前显示确认提示？这在除 IOS safari 之外的所有浏览器中都可以正常工作。我也尝试了 pagehide 事件，但对我不起作用。提前致谢。

【解决方案2】：

我发现 onunload() 事件确实会触发。它的行为有点奇怪；附加到事件的回调函数中的任何内容实际上都是在新页面在后台加载后运行的（您无法判断它是否已加载，但服务器日志记录会显示它已加载）。

更奇怪的是，如果你在 onunload() 中有一个 confirm() 调用，并且用户点击了一个链接去其他地方，那么你在做生意。但是，如果用户关闭 iPad Safari 浏览器选项卡，onunload() 事件将触发，但您的 confirm() 将隐含取消作为响应。

【讨论】：

嗯，似乎这种确认怪癖（第二页在确认消息之前被点击）不仅适用于移动 safari，而且适用于 firefox（可能还有其他）。你让我大吃一惊。
unload 已弃用事件以支持pagehide 请参阅developer.apple.com/library/ios/documentation/AppleApplications/…
@sol0mka：就是这样，伙计！伟大的！就我而言，就我的所有浏览器和 iOS 而言，以下代码完成了这项工作： $(window).on('beforeunload pagehide', function() { // 我必须在页面上完成的工作改变 } ）;在我看来，这应该是公认的答案。
需要注意的是，在某些情况下，浏览器可能无法可靠地触发 unload、beforeunload 和 pagehide 事件。例如，如果移动用户通过应用管理器关闭浏览器应用，则不会触发 pagehide。来源：developer.mozilla.org/en-US/docs/Web/API/Window/pagehide_event

【解决方案3】：

只有 Apple 才能确定，但我的猜测是他们故意没有在移动 Safari 中启用该功能，因为它最常被阴暗的角色用来让您留在他们的网站上或弹出大量色情/广告窗户。

【讨论】：

或者，你知道，自动保存你的更改，这样它们就不会因为你不小心点击了错误的东西而丢失。
我没有说没有有效的用途，我只是说那些是最常用的。
@JoelMueller 您的评论应该是公认的答案:)
@JoelMueller 这正是我的用例。呜呜@苹果
@JoelMueller 您能否分享任何官方文档，我们可以在其中解决移动 safari 自动保存更改的声明。

【解决方案4】：

有一个带有 onbeforeunload 的known bug in WebKit。我相信它已在 Chrome 5 的最新测试版中修复，但 iPad 的浏览器很可能是由没有修复的 WebKit 版本制成的。

Related Chrome bug report.

【讨论】：

我很困惑还是 iPad 浏览器上仍然存在这个错误？

【解决方案5】：

Mobile Safari 不支持 beforeunload 事件。您可以在此处查看所有支持的事件列表：Handling Events Apple documentation

而且 beforeunload 不在列表中！

【讨论】：

【解决方案6】：

https://code.google.com/p/chromium/issues/detail?id=97035

见闻。

在页面关闭事件（卸载前、卸载、页面隐藏之前）期间不再允许发出警报。

我认为警报、提示、确认和其他类似的操作也不再被允许。

【讨论】：

【解决方案7】：

这是一个适用于所有现代浏览器的解决方案：

var unloaded = false;
window.addEventListener("beforeunload", function(e)
{
    if (unloaded)
        return;
    unloaded = true;
    console.log("beforeUnload");
});
window.addEventListener("visibilitychange", function(e)
{
    if (document.visibilityState == 'hidden')
    {
        if (unloaded)
            return;
        unloaded = true;
        console.log("beforeUnload");
    }
});

移动浏览器往往不支持beforeunload，因为浏览器可以不卸载页面就进入后台，随时被操作系统杀死。

大多数桌面浏览器都包含一个错误，该错误会导致在卸载文档时不会调用 visibilityState。请参阅：here。

因此，重要的是要同时包含这两个事件以涵盖所有场景。

注意

我在示例中使用了console.log 而不是alert，因为alert 在从beforeunload 或visibilitychange 调用时会被某些浏览器阻止。

【讨论】：

【解决方案8】：

如果您只需要知道页面是否已离开，您可以使用document.unload。它在 ios 浏览器中运行良好。如果您在 Apple documentation 上看到，您会发现它已被弃用，他们建议使用 document.pagehide

【讨论】：

是的，此事件在 safari 中触发，但确认提示不像 chrome 中那样出现。