如何在不更改URL的情况下强制浏览器重新加载缓存的URL

Question

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

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

Answer 1

下面的代码片段将使具有等于uriOfCachedPage的URI的页面缓存条目失效。

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

您需要将这些代码注入到您的用户可能得到的脚本或HTML页面中。

有关更多信息，请查看RFC 7232超文本传输协议(HTTP/1.1)中MDN和请求缓存-控制指令部分的请求缓存-控制指令页面:缓存。

您还可以将cachedPageReloaded标志存储在cookies或localStorage中，并且只有在以前没有失效的情况下才能使缓存条目失效。检查MDN上的Document.cookie和Window.localStorage页面。

Answer 2

在URL中添加TimeStamp参数重新加载页面以防止加载缓存的版本

下面是一个函数，用于每次访问html页面时重新加载它，该函数将时间戳作为“版本”参数附加到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;
}());

此方法向URL添加一个参数，但它不会“更改”它。通过将表单数据参数添加到url的末尾，这种方法通常用于从表单中传递数据。

防止缓存的外部.js文件

为了确保您从外部.js文件中提供最新的javascript (通过脚本标记包括在内)，您可以使用jQuery getScript()函数，您可以阅读有关这里的内容。它将时间戳参数添加到资源URL的末尾(而不是实际页面的URL)，以便加载的外部.js文件始终是当前的。

示例用法：

$.getScript('url_to_your_javascript_file.js'); 

Answer 3

您可以在url的末尾添加时间戳作为querystring：

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

您可以在没有缓存选项的情况下调用AJAX请求来不更改url，也可以不刷新页面：

$.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);

完全HTML解决方案

<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