如何強制瀏覽器在不更改URL的情況下重新加載緩存的URL

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）：緩存中的“ 請求緩存控制指令”部分。

您還可以將cachedPageReloaded標志存儲在cookie或localStorage中，並且僅在以前沒有使緩存條目無效時使它無效。 檢查MDN上的Document.cookie和Window.localStorage頁面。

Answer 2

重新加載頁面，並將時間戳參數添加到URL，以防止加載緩存的版本

下面是一個用於每次訪問html頁面時重新加載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（）函數，您可以在此處閱讀有關此信息。 它將timestamp參數添加到資源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);

完整的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