window.onbeforeunload在iPad上不起作用?


84

有人知道onbeforeunloadiPad是否支持该活动和/或是否有其他使用方式吗?

我已经做了几乎所有的尝试,似乎onbeforeunload从未在iPad(Safari浏览器)上触发该事件。

具体来说,这就是我尝试过的方法:

  • 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

因此,浏览器确实具有该属性,但是由于某种原因它没有被解雇。

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

有谁知道发生了什么吗?我将不胜感激任何输入。

谢谢


谢谢你们的投入。这一定是您提到的原因之一。不幸的是,Apple没有有关此限制和其他限制的官方文档。希望他们能提出一种更具创造性的方法来启用此功能,同时防止恶意使用它。我经常听到人们不小心离开页面,丢失了他们以表格形式输入的所有数据。
艺术赞布拉诺

您是否尝试过使用addEventListener()
Hello71 2011年

2
我确定beforeunload在iOS的Safari上无法正常工作。:-(也许不是您想要的东西,但我对如何可靠地测试工作能力beforeunload
Peter V.Mørch2013年

1
在16年3月3日,Thewindow.onbeforeunload = function(event) { event.returnValue = 'test'; }不适用于iOS 9.2.1的Chrome和Safari。我真的很喜欢,onbeforeunload因为单击“取消”后页面不会更改。
vanduc1102 '16

似乎这个问题已在Safari和iOS 13中得到解决
-Finesse

Answers:


20

我发现onunload()事件确实触发了。它的行为有些奇怪。回调函数中附加到该事件的任何内容实际上都是在新页面已在后台加载之后运行的(您无法确定它是否已加载,但是服务器日志记录将显示它已加载)。

更奇怪的是,如果您在onunload()中有一个verify()调用,并且用户单击了链接以转到其他地方,那么您就是在做生意。但是,如果用户关闭iPad Safari浏览器选项卡,则将触发onunload()事件,但您的Confirm()将隐式取消作为响应。


呵呵,似乎这个确认问题(在确认消息之前点击了第二页)不仅适用于移动浏览器,而且适用于Firefox(可能还有其他)。你真让我震惊。
阿马尔戈维纳斯

4
unload不赞成使用此事件,pagehide请参阅developer.apple.com/library/ios/documentation/AppleApplications/…–
sol0mka

1
@ sol0mka:就是这样,伙计!大!就我而言,以下代码已经完成了工作,据我所知,我在所有浏览器和iOS上都可以看到:$(window).on('beforeunload pagehide',function(){//我必须在页面上完成的工作改变}); 这应该是我眼中公认的答案。
Garavani

18

这部分JavaScript在Safari和Chrome在ipad和iphone以及台式机/笔记本电脑/其他浏览器上对我有效:

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!
    ...
} );

1
它可以捕获事件,但是如何弹出确认提示?使用return 'test';与op相似的方法无法正常工作
。–

谢谢,我在最初的问题中错过了这一点。我还没有在iOS上专门测试过此功能,但可能会添加以下附加行即可:window.event.cancelBubble = true; 我会补充我的答案
危险

2
谢谢,但是遗憾的是它不起作用...我试图在其中放进alert(),似乎新页面已经在Alert()触发之前开始加载。也看到这一点:stackoverflow.com/questions/3239834/...
user2335065

@ user2335065您是否找到相同的任何解决方案。
Neeraj Rathod

伙计们,您是否找到任何解决方案,以便在离开页面前显示确认提示?在IOS Safari之外的所有浏览器中,此功能都可以正常工作。我也尝试过pagehide事件,但对我没有用。提前致谢。
Rahul

6

只有苹果公司可以确定,但是我猜测他们故意没有在移动Safari中启用该功能,因为可疑角色最常使用该功能,使您留在他们的网站上或弹出许多色情/广告窗口。


55
或者,您知道自动保存所做的更改,这样就不会因为您不小心点击了错误的内容而丢失了更改。
乔尔·穆勒

4
我没有说没有有效的用途,我只是说那些是最常用的用途。
Charles Boyung 2010年

3
@JoelMueller您的评论应该是被接受的答案:)
sanchez

1
@JoelMueller这正是我的用例。Grrr @ apple
user2808054 '16

@JoelMueller,您可以分享任何官方文档吗,我们可以在此声明这一说法,即移动Safari会自动保存更改。
Neeraj Rathod




1

如果您只需要知道是否已离开页面,则可以使用document.unload。它在ios浏览器中正常工作。如果您在Apple文档中看到文档,您会发现它已被弃用,他们建议使用document.pagehide


是的,此事件在safari中触发,但确认提示不如chrome中出现。
Rahul

1

以下是适用于所有现代浏览器的解决方案:

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在文档卸载时不会被调用。看到:这里

因此,包括两个事件以覆盖所有场景很重要。

NB

我在示例中使用console.log而不是,alert因为alertbeforeunload或调用时,某些浏览器会阻止它visibilitychange

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.