Question

我在我的JS中使用它：

window.history.replaceState({url: , scrollTop: wTop}, 'foo', 'bar');

但是当我从这里转到另一页然后按后退按钮时，我最终没有发出请求。相反，我的浏览器从“磁盘缓存”加载所有内容。我想再次发出请求，因为我的状态已发生变化，应该要求更正的页面。我怎样才能做到这一点？

我在我的rails控制器中试过这个：

response.headers['Cache-Control'] = 'no-cache, no-store, must-revalidate'
response.headers['Pragma'] = 'no-cache'
response.headers['Expires'] = '0'

但显然，历史记录列表与缓存功能并不完全相关。

Answer 1

我用隐藏的输入和一些脚本来做。假设你有jQuery，可以选择以下内容（显然只要你不使用它就修改它）：

<input type="hidden" id="reload_page" value="false" />

然后：

$(document).ready(function() {
   if ($("#reload_page").val() == "true") {
       location.reload(true);
   } else {
       $("#reload_page").val("true");
   }
}

＆＃34; true＆＃34; location.reload事件中的标志告诉它从服务器而不是从缓存重新加载页面。浏览器应将您的输入值存储为缓存的一部分，因此页面将在您返回时刷新，但不会在首次加载时刷新。

如果您正在使用已添加的页面，以便它没有历史状态，您可以稍微改变一下这个过程 - 而不是直接重新加载，如上所述，添加表单提交而不是直接重新加载，如下所示：

<form id="reload_form" method="get">
<input type="hidden" id="no_refresh" val="true" />
</form>

与类似的脚本配对：

$(document).ready(function() {
    if (!$.urlParam('no_refresh')) {
        $("#reload_form").submit();
    }
});

这使用了找到here的$ .urlParam函数，但是它的工作原理类似于自然的＆＃34; back＆＃34;上面的代码段中的函数 - 一旦提交表单以刷新页面，该参数就变为可用，并且更改的状态会阻止脚本刷新页面。

Answer 2

您需要添加pop state listener。

window.onpopstate = function(event) {
   alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

如果您不添加此侦听器，则浏览器将以传统方式运行，在状态更改时从服务器请求页面（或从缓存加载）。

注意：浏览器缓存标题仍然可以与推/弹状态一起使用，这可以改善首页加载。

Javascript：访问以前状态时再次发出请求

2 个答案: