如何强制页面无缓存重载并保留滚动位置？

问题描述 #

我用HTML、PHP和MySQL搭建网站，用户点击激活的隐藏表单提交评论后，评论会追加到对应数据库记录的评论字段中。需要实现无缓存的页面重载来获取新增评论，同时希望尽量保留当前滚动位置（优先保证无缓存刷新）。目前使用的refreshpagekeepPosition函数能保留滚动位置，但页面从缓存加载，无法获取新提交的评论，求修改函数实现需求。

原函数代码：

function refreshpagekeepPosition() {
    document.addEventListener("DOMContentLoaded", function (event) {
        var scrollpos = sessionStorage.getItem('scrollpos');
        if (scrollpos) {
            window.scrollTo(0, scrollpos);
            sessionStorage.removeItem('scrollpos');
        }
    });

    window.addEventListener("beforeunload", function (e) {
        sessionStorage.setItem('scrollpos', window.scrollY);
    });
}

解决方案 #

核心思路 #

要绕过缓存获取最新页面，关键是让浏览器发起全新的服务器请求，而不是读取本地缓存。同时保留原函数的滚动位置存储逻辑，实现重载后恢复位置。

修改后的完整函数 #

以下是兼顾无缓存刷新和滚动位置保留的版本：

function refreshPageNoCacheKeepPosition() {
    // 页面加载完成后恢复滚动位置
    document.addEventListener("DOMContentLoaded", function (event) {
        const scrollpos = sessionStorage.getItem('scrollpos');
        if (scrollpos) {
            window.scrollTo(0, parseInt(scrollpos));
            sessionStorage.removeItem('scrollpos');
        }
    });

    // 页面卸载前保存当前滚动位置
    window.addEventListener("beforeunload", function (e) {
        sessionStorage.setItem('scrollpos', window.scrollY);
    });

    // 强制无缓存刷新页面：true参数要求从服务器重新加载，跳过缓存
    location.reload(true);
}

关键说明 #

• location.reload(true)：这是实现无缓存的核心，传入true参数后，浏览器会直接向服务器请求最新页面内容，完全绕过本地缓存，确保能读取到刚提交的新评论。
• 滚动位置逻辑：保留原函数用sessionStorage存储滚动位置的逻辑，页面重新加载后自动读取并恢复到之前的位置。
• 优先级满足：如果滚动位置偶尔恢复失败，也不影响核心需求（获取最新评论），符合你的优先级要求。

备选方案（URL添加唯一参数） #

如果location.reload(true)在个别浏览器存在兼容性问题，可以用URL添加唯一时间戳的方式强制刷新：

function refreshPageNoCacheKeepPosition() {
    // 先保存当前滚动位置
    sessionStorage.setItem('scrollpos', window.scrollY);
    // 拼接时间戳参数，让浏览器认为是新请求，绕过缓存
    const baseUrl = window.location.href.split('?')[0];
    window.location.href = `${baseUrl}?nocache=${new Date().getTime()}`;
}

该方案通过给URL添加唯一的nocache参数，迫使浏览器向服务器发起新请求，页面加载后同样会触发DOMContentLoaded事件恢复滚动位置。

内容的提问来源于stack exchange，提问作者Alan - Seattle