使用Javascript在Chrome中强制重新加载页面[不缓存]

Question

我需要使用JavaScript重新加载一个页面，并确保它不从浏览器缓存中获取，而是从服务器重新加载页面。[因为页面元素在此期间可能已更改]

在IE和FF上，我发现以下代码可以正常工作;

window.location.reload(true);

然而它在Chrome或Safari上无效。

我尝试了以下方法，但也没有用；

window.location.replace(location.href);
document.location.reload(true);
document.location.replace(location.href);

这个问题有解决方案吗？

研究结果

经过调查，我发现这个问题是HTTP协议处理引起的：

1. Chrome发送带有Pragma: no-cache HTTP字段的请求。
2. 服务器响应带有Last-Modified: DATE1字段的请求。
3. JS使用location.reload(true)强制从服务器而不是缓存重新加载。
4. Chrome发送一个带有If-Modified-Since: DATE1字段的请求。
5. 服务器响应HTTP状态304未修改。

服务器应用程序没有注意到动态页面内容的状态更改，因此没有返回200。但是，Chrome / WebKit是唯一在调用JS location.reload(true)时发送If-Modified-Since字段的浏览器。

我想把我的发现放在这里，以防其他人遇到同样的问题。

- graney

Answer 1

您可以使用这个技巧：

 $.ajax({
        url: window.location.href,
        headers: {
            "Pragma": "no-cache",
            "Expires": -1,
            "Cache-Control": "no-cache"
        }
    }).done(function () {
        window.location.reload(true);
    });

- Suhan

---

先生，您真是个天才。但值得记住的是：a.) 通过ajax获取页面后，您将使用更多的带宽，然后再次使用带宽；b.) 客户端将在看到页面重新加载之前等待ajax调用完成。 - GreatSeaSpider

这看起来是一个不错的解决方案，但它会创建一个重新加载循环。如何避免这种情况？ - Mateng

@Mateng，你说的循环是什么意思？ - Suhan

该页面一直在重新加载，并且永远无法完成（Firefox）。 - Mateng

这仅适用于页面，而不适用于页面加载的资源。 - Marcos Kubis

Answer 2

为了确保页面不会从缓存中加载，您可以在查询中添加一些唯一的数字：

window.location = location.href + '?upd=' + 123456;

你也可以使用日期代替123456

- m03geek

---

然而，当一个人通过导航项导航到location.href时，它会从缓存中加载旧数据。 - graney

你可以为那些不想从缓存中加载的文档设置缓存策略。你可以在服务器响应中添加以下头部信息： Cache-Control "max-age=7200, must-revalidate" - m03geek

顺便说一下，在我的Chrome（21.0.1145）中，window.location.reload()运行良好。 - m03geek

OK. 问题与HTTP协议握手有关。

1. 初始Chrome请求包含一个头，其中包含Pragma: no-cache。
2. 服务器响应一个包含Last-Modified: DATE1的头。
3. JS调用location.reload(true); 应该强制忽略缓存。
4. Chrome请求包含If-Modified-Since: DATE1。
5. 服务器响应; Http状态：304未修改

其他浏览器在location.load（true）时不包括If-Modified-Since头字段，因为它旨在强制获取。WebKit浏览器则会包括。 - graney

让url = window.location.href.split('?')[0]; window.location = url + '?upd=' + Math.floor(Math.random() * 100); - Khalid Almannai

Answer 3

这是我为确保我的应用程序文件在Chrome上强制重新加载所做的操作：

    var oAjax = new XMLHttpRequest;
    oAjax.open( 'get', '/path/to/my/app.js' );
    oAjax.setRequestHeader( 'Pragma', 'no-cache' );
    oAjax.send();
    oAjax.onreadystatechange = function() {
        if( oAjax.readyState === 4 ) {
            self.location.reload();
        }
    }

- Juergen Riemer

---

这重新加载了页面，但在Chrome和Edge中仍使用缓存的图像。 - David.P

Answer 4

尝试执行 window.location = window.location。

- TW147

---

这个操作会在查询字符串中添加一个类似于随机字符串和时间戳的前缀（根据路径中是否已经有“？”来决定是添加“&timestamp=”还是“?timestamp=”）。 - Iain Collins

Answer 5

太棒了！我刚遇到了同样的问题，这真的帮了很多忙！ 不过，除了你的发现之外，似乎Chrome总是发送一个GET请求来执行location.reload()...而IE/FF会再次重复上次的请求。

- Roy Ling