页面回退刷新代码Chrome生效Edge失效，求跨浏览器兼容实现方案

问题背景 #

通过window.history.back()返回页面时，在Chrome中使用onpageshow事件结合event.persisted判断可触发页面刷新，但在Edge 114.0.1823.86版本中，event.persisted未返回true，导致刷新逻辑失效。

替代实现方案 #

方案一：历史状态标记法（兼容性最优） #

在调用history.back()的页面，先给当前历史记录添加刷新标记，返回后目标页面检查该标记触发刷新：

1. 跳转页面的代码：

// 跳转前修改当前历史记录的状态，标记需要刷新目标页
history.replaceState({ needRefresh: true }, document.title);
window.history.back();

2. 目标页面的监听代码：

(function () {
    console.log("anon function");
    window.onpageshow = function(event) {
        console.log("onpageshow");
        const historyState = history.state;
        // 同时兼容persisted判断和自定义状态标记
        if (event.persisted || (historyState && historyState.needRefresh)) {
            console.log("触发页面刷新");
            // 刷新后重置状态，避免重复触发
            history.replaceState({ needRefresh: false }, document.title);
            window.location.reload();
        }
    };
})();

方案二：结合Navigation API（现代浏览器优先） #

利用现代浏览器支持的Navigation API，判断导航类型是否为后退/前进，同时兼容event.persisted：

(function () {
    console.log("anon function");
    window.onpageshow = function(event) {
        console.log("onpageshow");
        const navType = navigation?.type;
        // 覆盖bfcache加载和手动后退/前进场景
        if (event.persisted || navType === 'back' || navType === 'forward') {
            console.log("触发页面刷新");
            window.location.reload();
        }
    };
})();

方案三：禁用往返缓存（应急方案，不推荐） #

通过添加空的unload事件监听，强制浏览器不使用bfcache缓存页面，确保返回时重新加载：

// 目标页面添加该监听
window.addEventListener('unload', () => {});

// 原有的onpageshow逻辑可保留
(function () {
    console.log("anon function");
    window.onpageshow = function(event) {
        console.log("onpageshow");
        if (event.persisted) {
            console.log("event.persisted");
            window.location.reload();
        }
    };
})();

注意：该方案会导致页面每次返回都重新加载，丢失bfcache带来的性能优化，仅作为应急使用。

内容的提问来源于stack exchange，提问作者rjapenga