点击浏览器后退按钮自动触发事件监听器问题求助

问题根源 #

这不是新版本浏览器的bug，而是现代Chrome、Firefox默认启用的**bfcache（后退/前进缓存）**机制导致的。当用户点击链接跳转后，浏览器会把当前页面的完整运行状态（包括你通过JS修改的加载框显示状态）存入bfcache；当点击后退按钮时，浏览器直接从缓存恢复整个页面，而非重新加载，所以之前触发的加载框显示状态被保留，导致回到页面时加载框自动出现。Seamonkey的缓存实现逻辑和主流浏览器不同，因此没有出现该问题。

修复代码 #

只需要添加对pageshow事件的监听，在页面从bfcache恢复时重置加载框的状态即可，修改后的JS代码如下：

function showbox(){
    document.getElementById('wbox').style.display="block";
}
// 新增重置加载框的函数
function resetLoadingBox() {
    document.getElementById('wbox').style.display="none";
}

document.getElementById('clickee').addEventListener("click",showbox);
// 监听页面显示事件，处理bfcache恢复场景
window.addEventListener('pageshow', function(e) {
    // event.persisted为true，说明页面是从bfcache中恢复的
    if (e.persisted) {
        resetLoadingBox();
    }
});

额外说明 #

• 你代码中的PHP 304缓存逻辑会强化浏览器的缓存行为，但核心问题还是bfcache对DOM状态的持久化，上述修复可以覆盖该场景。
• 无JavaScript环境下的跳转不受影响，原本的直接跳转逻辑依然正常工作。

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