Javascript 使用window.location.reload和Chrome中的hash片段从缓存加载'；行不通_Javascript_Http_Google Chrome_Caching_Browser Cache

Javascript 使用window.location.reload和Chrome中的hash片段从缓存加载'；行不通

javascript http google-chrome caching

Javascript 使用window.location.reload和Chrome中的hash片段从缓存加载'；行不通,javascript,http,google-chrome,caching,browser-cache,Javascript,Http,Google Chrome,Caching,Browser Cache,我需要用Javascript重新加载页面。为此，我使用了window.location.reload。现在，我在Chrome中观察到一种奇怪的行为：Chrome总是连接到服务器并询问文档是否被修改。虽然返回了一个未修改的304，但仍然存在到服务器的往返，我希望避免这种情况我还尝试显式使用window.location.reload（false）告诉chrome使用缓存，但没有成功。并不是说我在重新加载的url中有一个活动的散列（#）片段资源的响应头如下所示： HTTP/1.1 304 Not

我需要用Javascript重新加载页面。为此，我使用了

window.location.reload

。现在，我在Chrome中观察到一种奇怪的行为：Chrome总是连接到服务器并询问文档是否被修改。虽然返回了一个未修改的

，但仍然存在到服务器的往返，我希望避免这种情况

我还尝试显式使用

window.location.reload（false）

告诉chrome使用缓存，但没有成功。并不是说我在重新加载的url中有一个活动的散列（#）片段

资源的响应头如下所示：

HTTP/1.1 304 Not Modified
Server: nginx/1.2.2
Date: Sat, 01 Jun 2013 13:19:56 GMT
Last-Modified: Sat, 01 Jun 2013 13:04:55 GMT
Connection: keep-alive
Expires: Sun, 02 Jun 2013 13:19:56 GMT
Cache-Control: max-age=86400
Access-Control-Allow-Origin: *

因此，

Cache Control

和

Expires

头都设置好了，应该告诉chrome不要在24小时内更新资源

我没有使用F5/CMD+R重新加载页面，而是单击一个链接，该链接将有一个javascript事件，该事件将更改

window.location.hash

，然后调用

window.location.reload（false）

。但是Chrome一直在为请求设置

缓存控制：max age=0

头，这是我不想要的。Chrome应该使用它的内部缓存，而不向服务器发送任何东西

使用Firefox的相同代码没有问题，FF使用的是缓存版本，根本没有连接到服务器

我怎样才能解决这个问题

编辑：这里有一个简单的例子，你可以用来试用自己：

编辑：我关闭了开发人员工具，并通过服务器上的

tcpdump-s1024-l-adst端口80

验证标题。我还取消了开发人员工具中的“禁用浏览器缓存”复选框

编辑2：请注意，如果关闭选项卡并将Url输入新的Url，Chrome将正确使用缓存。仅单击链接（这将导致出现一个

窗口。location.reload

会受到影响。

您可以执行以下操作：

function reload_page() {
    window.location.hash = new Date().getTime();
    window.location.replace(window.location.href);
    loaded();
}
window.onload = loaded;

function loaded() {
    document.getElementById('thetime').innerHTML = new Date().toISOString();
}

你可以这样做：

function reload_page() {
    window.location.hash = new Date().getTime();
    window.location.replace(window.location.href);
    loaded();
}
window.onload = loaded;

function loaded() {
    document.getElementById('thetime').innerHTML = new Date().toISOString();
}

使用F5或

window.location.reload重新加载页面会建立网络连接，即使从其他页面导航到该页面会直接查看缓存。而重新加载（true）
会强制它绕过缓存（从服务器获取200
，而不是304
），重新加载（false）
不会强制它在决定是否需要连接到服务器之前查看缓存
如果浏览器不会在缓存中查找以重新加载页面，并且在链接后面只跟片段不同时也不会重新加载页面，请尝试愚弄它，使其认为正在加载不同的页面以使其在缓存中查找。这使用ajax（从缓存中）获取您正在查看的页面将替换整个文档，然后将URI片段替换为一个新的片段——以这种方式更改片段将触发JavaScript框架中侦听片段更改的任何函数
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
</head>
<body>
    <p>
        It is: <span id="thetime"></span>
    </p>
    <a href="javascript: reload_page()">Reload</a>
    <script type="text/javascript">
        function reload_page() {
            var hash = new Date().getTime()
            $.get(window.location, function(data) {
                var newDoc = document.open("text/html", "replace");
                newDoc.write(data);
                newDoc.close();
                window.location.hash = new Date().getTime();
            });
        }
        document.getElementById('thetime').innerHTML = new Date().toISOString();
    </script>
</body>
</html>



它是：

函数重载_页面（）{
var hash=new Date（）.getTime（）
$.get（窗口位置、函数（数据）{
var newDoc=document.open（“text/html”、“replace”）；
newDoc.write（数据）；
newDoc.close（）；
window.location.hash=new Date（）.getTime（）；
});
}
document.getElementById（'thetime'）。innerHTML=new Date（）.toISOString（）；
使用F5或窗口重新加载页面。location.reload
，即使从其他页面导航到页面会直接查看缓存，也会建立网络连接。而reload（true）
强制它绕过缓存（从服务器获取200
，而不是304
），reload（false）
不会强制它在决定是否需要连接到服务器之前查看缓存
如果浏览器不会在缓存中查找以重新加载页面，并且在链接后面只跟片段不同时也不会重新加载页面，请尝试愚弄它，使其认为正在加载不同的页面以使其在缓存中查找。这使用ajax（从缓存中）获取您正在查看的页面将替换整个文档，然后将URI片段替换为一个新的片段——以这种方式更改片段将触发JavaScript框架中侦听片段更改的任何函数
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
</head>
<body>
    <p>
        It is: <span id="thetime"></span>
    </p>
    <a href="javascript: reload_page()">Reload</a>
    <script type="text/javascript">
        function reload_page() {
            var hash = new Date().getTime()
            $.get(window.location, function(data) {
                var newDoc = document.open("text/html", "replace");
                newDoc.write(data);
                newDoc.close();
                window.location.hash = new Date().getTime();
            });
        }
        document.getElementById('thetime').innerHTML = new Date().toISOString();
    </script>
</body>
</html>



它是：

函数重载_页面（）{
var hash=new Date（）.getTime（）
$.get（窗口位置、函数（数据）{
var newDoc=document.open（“text/html”、“replace”）；
newDoc.write（数据）；
newDoc.close（）；
window.location.hash=new Date（）.getTime（）；
});
}
document.getElementById（'thetime'）。innerHTML=new Date（）.toISOString（）；
在进一步研究后回答我自己：
这根本做不到。
这个问题与散列值根本不相关，即使不使用散列也会出现问题
似乎window.location.reload（）
无法用于控制当前资源（由window.location.href
指示）是从缓存中使用还是不从缓存中使用。尽管上的文档另有建议。关于窗口中位置对象的官方W3C规范也没有多大帮助
Chrome和Firefox将始终执行到服务器的往返，询问当前资源，无论您传递给.reload（）
的参数是什么。该参数最初用于强制POST
请求作为GET
请求重复-这与缓存无关。（使用Firebug时要小心：我首先认为FF不会发送请求，因为它没有显示在Firebug中，但是当您查看Web时