Question

发生意外，某个HTML页面设置为由浏览器缓存。我们不想更改该页面的URL，因为其他方依赖该URL（包括SEO）。

有没有办法让尽可能多的客户重新加载该页面？在浏览网站时，客户经常会访问该页面，因此我们经常能够在遇到有问题的页面之前向他们发送一些新的JavaScript（或任何其他资源）。也许有一个强制重新加载的JavaScript技巧？！

Answer 1

下面的代码段会使URI等于uriOfCachedPage的页面的缓存条目无效：

var xhr = new XMLHttpRequest();
xhr.open("GET", uriOfCachedPage, true);
xhr.setRequestHeader("Cache-Control", "max-age=0");
xhr.send();

您需要将此代码注入用户可能获得的脚本或HTML页面。

有关更多信息，请查看MDN上的XMLHttpRequest页面和RFC 7232超文本传输协议（HTTP / 1.1）中的Request Cache-Control Directives部分：缓存。

您还可以在Cookie或localStorage中存储cachedPageReloaded标志，并且只有在之前未使用无效的情况下才会使缓存条目无效。检查MDN上的Document.cookie和Window.localStorage页。

Answer 2

将TimeStamp参数添加到URL以重新加载页面以防止加载缓存版本

下面是我每次访问时用来重新加载html页面的函数，它将时间戳附加为＆＃34;版本＆＃34; URL的参数，确保它永远不是正在检索的页面的缓存副本。

// reloads page with a time-stamp appended to URL 
// to ensure current form version loads
( function() {
    var x = new Date().valueOf();
    var now = x.toString().slice(-10);
    var later = (x + 30000).toString().slice(-10);
    var uSplit = window.location.href.toString().split('?');

    if(uSplit.length > 1){
        var oldNum = uSplit[1].slice(2);
        var oldDate = parseInt(x.toString().replace(now, oldNum));
        var diff = oldNum - now;
    } else { 
        var diff = 0; 
    }

    if(diff <= 0){ 
        var newURL = uSplit[0] + "?v=" + later; 
        window.location.replace(newURL);
    } else { 
        return false; 
    }
    return false;
}());

此方法会向网址添加参数，但不会更改＆＃34;更改＆＃34;它。它通常用于通过将表单数据参数添加到URL的末尾来从表单中携带数据的方法。

防止缓存的外部.js文件

为了确保您通过脚本标记从外部.js文件提供最新的javascript，您可以使用jQuery getScript（）函数，您可以阅读HERE。它将时间戳参数添加到资源URL的末尾（而不是实际页面的URL），以便加载的外部.js文件始终是最新的。

示例用法：

$.getScript('url_to_your_javascript_file.js');

Answer 3

您可以在网址末尾添加时间戳作为查询字符串：

var url = "http://yoursite.com/your.html?r=" + (new Date()).getTime();

您可以调用没有缓存选项的AJAX请求，以便不更改网址而不刷新页面：

$.ajax({
        url: "your.html",
        cache: false, //<== don't cache!
        type: "GET",
        dataType: "json",
        success: function(data, textStatus) {
                         $("#body").html(data);
                 }
    });

正在寻找JavaScript解决方案？

window.location.reload(true);

Full HTML solution

<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />

从服务器端添加这些标题：https://stackoverflow.com/a/2068407/3958365

如何强制浏览器重新加载缓存的URL而不更改URL

3 个答案:

将TimeStamp参数添加到URL以重新加载页面以防止加载缓存版本

防止缓存的外部.js文件