js window.history.back()返回上一页后如何自动刷新页面

使用js的window.history.back()方法返回上一页后会发现上一页的内容并没有刷新，因为页面是从缓存加载。这样就会有问题，比如在页面页点击链接进入编辑页面改变内容的状态后再回到列表页，发现列表页里的状态没有变化，必须刷新页面才能看到编辑后的结果。那么怎么才能在使用window.history.back()返回上一页后如何自动刷新页面呢？

可以在 window.history.back() 返回上一页之后自动刷新页面，通过以下几种方式来实现：

方法 1：使用 pageshow 事件

pageshow 事件会在页面加载时触发，包括浏览器的前进/后退操作。因此，可以监听这个事件并在页面进入时强制刷新。

window.addEventListener("pageshow", function(event) {
    if (event.persisted) {
        // 当页面是从缓存加载时（例如通过后退操作），刷新页面
        window.location.reload();
    }
});

方法2：结合使用 document.referrer

如果当前页面是从上一页点击跳转过来的，document.referrer 可以获取跳转前的页面 URL。如果存在document.referrer，那么使用document.location跳转到上个页面，否则仍然使用window.history.back()方法返回上个页面。

const previousUrl = document.referrer;
if (previousUrl) {
    document.location = previousUrl;
} else {
    window.history.back();
}

方法 3：在返回前设置标记并在加载时检查

可以在跳转到新页面之前，在 sessionStorage 中设置一个标记，返回时根据这个标记来决定是否刷新页面。

// 在跳转前设置标记
sessionStorage.setItem("shouldReload", "true");
window.history.back();

然后在页面加载时检查这个标记，如果存在就刷新页面：

// 检查标记并刷新页面
if (sessionStorage.getItem("shouldReload")) {
    sessionStorage.removeItem("shouldReload");
    window.location.reload();
}

方法 4：在返回时强制缓存失效

通过在 URL 后面加上时间戳等随机参数，也可以强制页面刷新。可以通过自定义的 backWithRefresh 函数实现：

function backWithRefresh() {
    window.history.back();
    setTimeout(() => {
        window.location.href = window.location.href + "?refresh=" + new Date().getTime();
    }, 100); // 等待返回执行完后刷新
}

这几个方法都可以根据场景选择最适合的来自动刷新页面。