移动 Safari 后退按钮

IT技术 javascript safari
2021-01-21 23:31:59

我发现的问题与这个问题非常相似,只是桌面上的 Safari 似乎已经解决了这个问题。本质上,问题是这样的:当客户端在移动 safari 上浏览并且页面在 上执行 javascript 函数pageA.html,然后导航到pageB.html,然后按后退按钮返回到pageA.html,当客户端按下 时,javascript 函数不会运行返回按钮返回pageA.html它将跳过 javascript 调用。

我已经尝试了上面链接中提到的解决方案,但似乎对移动 Safari 没有任何作用。有没有其他人遇到过这个错误?你是怎么处理的呢?

1个回答

这是由back-forward cache引起的当用户导航离开时,它应该保存页面的完整状态。当用户使用后退按钮向后导航时,可以非常快速地从缓存中加载页面。这与仅缓存 HTML 代码的普通缓存不同。

当页面加载时 bfcacheonload事件不会被触发。相反,您可以检查事件persisted属性onpageshow它在初始页面加载时设置为 false。当页面从 bfcache 加载时,它被设置为 true。

window.onpageshow = function(event) {
    if (event.persisted) {
        alert("From back / forward cache.");
    }
};

出于某种原因,jQuery 在事件中没有这个属性。不过,您可以从原始事件中找到它。

$(window).bind("pageshow", function(event) {
    if (event.originalEvent.persisted) {
      alert("From back / forward cache.");
    }
});

这些问题的快速解决方案是在按下后退按钮时重新加载页面。然而,这抵消了向后/向前缓存带来的任何积极影响。

window.onpageshow = function(event) {
    if (event.persisted) {
        window.location.reload() 
    }
};

作为旁注,您可以看到许多页面提供使用空onunload处理程序作为解决方案。自 iOS5 以来,这不起作用。

$(window).bind("unload", function() { });
应该注意的是,该解决方案不再适用于当前版本的 iOS(我相信我在某处读到它是 5ish 以外的任何内容)。pageshow 事件将在第一次后退/前进时触发,并且不会再次触发该页面历史状态。除此之外,我发现的唯一可行的解​​决方案是利用 popstate 事件来识别后退/前进。
2021-03-20 23:31:59
抱歉,这在 OSX 和 Safari 上对我不起作用。event.persisted 总是假的。难道我做错了什么?
2021-03-25 23:31:59
据我所知,这在现代浏览器中不起作用。插入的代码进入<head>,要么console.log()alert()event.persisted值,它始终返回false。在 Windows 上的 FF 54 和 Chrome 59 和 iOS 10.3.2 上的 Safari 中测试 - 不适用于其中任何一个。
2021-04-03 23:31:59
这适用于 iOS7,但如果屏幕关闭并再次打开,也会产生刷新页面的副作用。有什么办法可以解决这个问题吗?
2021-04-09 23:31:59
它是空的 onunload 处理程序,从 iOS5 开始就没有工作了。上面的答案适用于 iOS6。虽然不确定iOS7。稍后会测试。
2021-04-11 23:31:59