如何使用preventBack()实现点击返回按钮时刷新页面？

你提到的两段代码各有局限：一段能在双端阻止后退并让页面前进，另一段仅iOS能触发刷新但Android无效。下面是整合优化后的方案，能在iOS（包括滑动返回）和Android点击返回按钮时都触发页面刷新：

方案实现代码 #

<input type="hidden" id="refreshed" value="no">
<script type="text/javascript">
// 处理页面加载时的刷新判断
window.onload = function() {
    const refreshFlag = document.getElementById("refreshed");
    // 如果标记为需要刷新，则执行刷新并重置标记
    if (refreshFlag.value === "yes") {
        refreshFlag.value = "no";
        window.location.reload(true); // 强制从服务器刷新，避免缓存
    }
};

// 阻止默认后退行为并触发刷新逻辑
function preventBack() {
    // 先将标记设为需要刷新
    document.getElementById("refreshed").value = "yes";
    // 让页面历史前进，覆盖后退的历史记录
    window.history.forward();
}

// 页面加载完成后立即绑定阻止后退的逻辑
setTimeout(preventBack, 0);

// 处理页面卸载时的逻辑，确保标记状态不丢失
window.onunload = function() {
    // 空函数避免部分浏览器重置历史记录
};
</script>

代码细节解释 #

• 隐藏输入框#refreshed：作为刷新状态的标记，用来判断当前页面是否是通过后退操作进入的。
• window.onload 事件：页面加载时检查标记，如果值为yes，说明是从后退动作进入的页面，立即执行刷新并重置标记。
• preventBack() 函数：触发后退动作时，先把刷新标记设为yes，再通过window.history.forward()修改历史记录，让后退行为指向我们标记过的状态，最终触发刷新。
• setTimeout(preventBack, 0)：确保页面加载完成后立刻抢占历史记录控制权，避免默认后退逻辑优先执行。
• window.onunload：空函数用来规避部分Android浏览器在页面卸载时异常重置历史记录的问题。

原代码Android无效的原因 #

原第二段代码仅依赖页面加载时的标记判断，但Android系统的浏览器（尤其是部分国产浏览器）对页面缓存、历史记录的处理逻辑和iOS差异较大，单纯的标记无法触发刷新。通过结合window.history.forward()强制修改历史记录流程，再配合标记判断，就能实现双端兼容。

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