如何强制 window.location 发出 HTTP 请求而不是使用缓存？

Posted 2023-02-21

【中文标题】如何强制 window.location 发出 HTTP 请求而不是使用缓存？

【英文标题】：How can I force window.location to make an HTTP request instead of using the cache?

【发布时间】：2012-12-21 06:15:15

【问题描述】：

在我的 Web 应用程序中，我将 window.location 设置为导航到不同的页面，但由于某种原因，Firefox 显示了该页面的旧版本。

使用 Firebug 我检测到浏览器甚至没有发送 HTTP 请求，它只是使用该页面的旧版本（甚至不是最后一个）并显示它。

页面本身有all the usual headers 以防止缓存，当我使用链接或手动输入浏览我的页面时，它可以完美地工作。该问题仅在设置window.location时出现。

这是 Firefox 的问题还是任何浏览器都会出现的问题？这种行为可以改变吗？

【参考方案1】：

只需要告诉你的下载函数（在控制器中，在 Laravel 的情况下）不要通过设置标题来缓存它，对 Laravel 使用以下代码：

$headers =[
            'Content-Type' => 'application/text',
            'Cache-Control' => 'no-store, no-cache, must-revalidate, max-age=0',
            'Cache-Control' => 'post-check=0, pre-check=0, false',
             'Pragma' => 'no-cache',  ];
return response()->file($pathToFile, $headers);

此代码非常适用于 php，只需要相应地传输代码即可。添加新日期可能会使链接失效，尤其是在您使用临时签名链接等时。

干杯

【参考方案2】：

您必须验证 url 中是否存在任何现有的查询参数。如果存在任何查询参数，则应使用“&”附加时间戳。我写了一个可能对你有帮助的快速 sn-p。

window.newLocation = function( location ) 
    var newLocation = ( typeof location === "string" ) ? location : window.location.href,
       appendType = ( newLocation.indexOf("?") < 0 ) ? "?" : "&";
    window.location = newLocation + appendType + "_t=" + (new Date()).getTime();

用法：

newLocation("index.html") or window.newLocation("index.html") 
// opens "index.html?_t=<timstamp>"

newLocation("index.html?existingQuery=true") or window.newLocation("index.html?existingQuery=true") 
// opens "index.html?existingQuery=true&_t=<timstamp

newLocation() or window.newLocation() 
// opens existing window location with a timestamp

您可以进一步修改 sn-p 以删除查询参数中的现有时间戳以避免重复

【参考方案3】：

在 url 中添加一些时间特定或随机的查询字符串值。这将强制重新加载页面。

var yourNewLoc = "http://newlocation.com/";
document.location = yourNewLoc + "?c=" + (new Date()).valueOf();

【参考方案4】：

您可以在页面 URL 中添加一个随机参数，以便让浏览器发出新请求。

所以不要使用

 window.location = "my.url/index.html";

使用

 window.location = "my.url/index.html?nocache=" + (new Date()).getTime();

【讨论】：

优秀的旧缓存破坏器 :) 我现在正在使用它，但我也对一些背景信息感兴趣，比如这是 window.location 的设计行为，或者我是这里做错了什么。

如果您的页面带有 http 标头，表明不缓存该页面，我认为它不会被缓存。但是，如果它没有提供“无缓存”标头，那么尽可能多地缓存它以节省带宽是一种很好的行为。用户浏览器和各种互联网设备（如代理）中都可能发生缓存。因此，更好的方法是控制页面的缓存。但是“缓存破坏者”是最简单的方法......

【参考方案5】：

您可以将 location.reload 与 true 参数一起使用，这将始终绕过缓存。

window.location.reload(true);

【讨论】：

这只会重新加载实际站点。此命令不能用于绕过缓存导航到任何其他站点。