当从 iOS 浏览器的 Back-Forward 缓存中检索页面时始终触发的事件

Posted 2023-02-23

【中文标题】当从 iOS 浏览器的 Back-Forward 缓存中检索页面时始终触发的事件

【英文标题】：An event that is consistently fired when the page is retrieved from the Back-Forward cache in iOS browsers

【发布时间】：2017-03-21 07:23:24

【问题描述】：

当我在移动设备 (ios 10.2.1) Safari 或 Chrome 上使用后退按钮时：

窗口的页面显示事件是fired only once。 ^{建议：1、2、3、4、5、6、7} 窗口的 popstate 事件未触发。 ^{建议：1、2、3} 文档的 readystatechange 事件未触发。 ^建议：1

我为什么需要这个？

我在点击时禁用了提交按钮，因此无法多次提交表单，但是当用户使用浏览器的后退按钮返回页面时，由于 BFCache，提交按钮保持禁用状态。

我需要一个在用户离开页面或返回页面时触发的事件，以便我可以重新启用提交按钮。 unload 事件从不触发，pagehide 和 pageshow 事件仅在第一次触发：

我从页面 A 导航到页面 B。 A 的页面隐藏已触发（未触发卸载）。 我使用浏览器的后退按钮返回。 A 的 pageshow 已触发（未触发 load、popstate 或 readystatechange）。 我再次导航到 B，这次没有触发 A 的页面隐藏。 我再次使用返回按钮返回，A 的 pageshow 也没有触发。 后续的后退/前进触发我找不到任何事件。

一种解决方法是在第一回刷新页面：

window.addEventListener('pageshow', function (e) 
    if (e.persisted) 
        window.location.reload();
    
, false);

但这违背了 BFCache 的全部意义。当使用浏览器的返回按钮而不重新加载整个页面时，是否没有可靠的方法来做一些工作？

【问题讨论】：

这个你有什么好运气吗？我仍在努力让它发挥作用。

【参考方案1】：

这似乎是 Webkit 的一个已知错误： https://bugs.webkit.org/show_bug.cgi?id=156356

【参考方案2】：

我接受 morgoe 的回答，因为他提到的错误没有可靠的事件。

这里是绝望的解决方法： 它通过使用用户代理嗅探来检测 iOS 浏览器重新加载页面来禁用 BF 缓存。

window.addEventListener('pageshow', function (e) 
    e.persisted &&
    /iPad|iPhone|iPod/.test(navigator.userAgent) &&
    !window.MSStream &&
    window.location.reload();
, false);