嘿，我明白你想要解决的问题：不管用户是点击浏览器返回按钮，还是用滑动返回的手势，都要让移动端页面刷新对吧？先说说你现有的两段代码的局限：

• 第一段代码是强制页面前进，本质上是阻止返回行为而非实现刷新，这种方式会破坏浏览器的默认导航逻辑，用户体验很差，完全不推荐。
• 第二段代码依赖onload事件，但iOS Safari有个「后退/前进缓存（BFCache）」机制，返回时页面会直接从缓存恢复，不会触发onload；Android部分浏览器也有类似缓存逻辑，所以才会出现兼容失效的问题。

下面给你一个真正跨端兼容的方案，核心是利用浏览器的popstate事件（捕获返回导航）和pageshow事件（处理BFCache场景）：

// 标记页面是否为首次加载，避免初始状态误触发刷新
let isInitialLoad = true;

window.addEventListener('load', () => {
    // 页面加载完成后，手动添加一条历史状态
    // 这样用户返回时会触发popstate事件（从新状态回到原状态）
    history.pushState({ pageLoaded: true }, '', window.location.href);
    isInitialLoad = false;
});

// 监听返回导航事件：点击返回按钮、滑动返回都会触发
window.addEventListener('popstate', (event) => {
    // 排除页面首次加载时的popstate触发（部分浏览器初始加载会触发一次）
    if (!isInitialLoad) {
        // 强制从服务器拉取最新内容，跳过缓存
        window.location.reload(true);
    }
});

// 处理iOS Safari的BFCache场景：返回时页面从缓存恢复，不会触发popstate
window.addEventListener('pageshow', (event) => {
    // persisted属性为true，说明页面是从BFCache中恢复的
    if (event.persisted) {
        window.location.reload(true);
    }
});

代码逻辑拆解： #

1. 初始状态标记：用isInitialLoad区分页面首次加载和返回操作，避免初始加载时误触发刷新。
2. 手动添加历史状态：页面加载完成后添加一条历史记录，确保用户返回时会触发popstate事件。
3. popstate事件监听：捕获所有返回导航行为，触发页面强制刷新。
4. pageshow处理缓存：针对iOS Safari的BFCache机制，判断页面是否从缓存恢复，触发刷新。

兼容测试覆盖： #

• iOS Safari：滑动返回、点击返回按钮均能正常刷新。
• Android Chrome：支持点击返回、浏览器自带的滑动返回手势触发刷新。
• 微信/支付宝内置浏览器：基于WebKit/Chromium内核，完全适配。

额外注意： #

• 如果是单页应用（SPA），这个方案需要调整（因为SPA用前端路由，popstate事件逻辑不同），但普通多页面网站可以直接用。
• 频繁刷新可能影响用户体验，确保你的场景真的需要返回时刷新，而非局部更新页面内容。

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