如何强制客户端刷新JavaScript文件?

We are currently working in a private beta and so are still in the process of making fairly rapid changes, although obviously as usage is starting to ramp up, we will be slowing down this process. That being said, one issue we are running into is that after we push out an update with new JavaScript files, the client browsers still use the cached version of the file and they do not see the update. Obviously, on a support call, we can simply inform them to do a ctrlF5 refresh to ensure that they get the up-to-date files from the server, but it would be preferable to handle this before that time.

我们目前的想法是简单地将版本号附加到JavaScript文件的名称上，然后当进行更改时，增加脚本上的版本并更新所有引用。这肯定可以完成工作，但是在每个版本上更新引用可能会很麻烦。

我确信我们不是第一个处理这个问题的人，我想我应该把它扔给社区。当你更新你的代码时，你如何确保客户端更新他们的缓存?如果您正在使用上面描述的方法，那么您使用的是简化更改的过程吗?

当前回答

谷歌Page-Speed:不要在静态资源的URL中包含查询字符串。大多数代理，尤其是Squid到3.0版本，不会缓存URL中带有"?"的资源，即使响应中存在cache -control: public报头。要为这些资源启用代理缓存，请从静态资源引用中删除查询字符串，并将参数编码到文件名本身中。

在这种情况下，您可以将版本包含到URL ex: http://abc.com/v1.2/script.js中，并使用apache mod_rewrite将链接重定向到http://abc.com/script.js。当您更改版本时，客户端浏览器将更新新文件。

2011-10-06 08:13:44

其他回答

并非所有浏览器都使用'?’在里面。我所做的是确保它被尽可能多地缓存，我将版本包含在文件名中。

而不是stuff。js?我用stuff_123.js

我使用mod_redirect(我认为)在apache有stuff_*.js去stuff.js

2008-09-17 16:08:08

jQuery函数getScript也可以用来确保每次页面加载时确实加载了js文件。

我是这样做的:

$(document).ready(function(){
    $.getScript("../data/playlist.js", function(data, textStatus, jqxhr){
         startProgram();
    });
});

请登录http://api.jquery.com/jQuery.getScript/查看该功能

默认情况下，$. getscript()将缓存设置设置为false。这将向请求URL附加一个带有时间戳的查询参数，以确保浏览器在每次请求脚本时都会下载脚本。

2015-10-10 20:53:10

在ASP缓存破坏。NET Core通过标记助手将为您处理这个问题，并允许您的浏览器保留缓存的脚本/css，直到文件更改。只需在你的script (js)或link (css)标签中添加标签助手asp-追加-version="true":

<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true"/>

Dave Paquette有一个很好的例子和解释缓存破坏这里(页面底部)

2017-06-29 22:30:36

一个简单的方法。编辑htaccess

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} \.(jpe?g|bmp|png|gif|css|js|mp3|ogg)$ [NC]
RewriteCond %{QUERY_STRING} !^(.+?&v33|)v=33[^&]*(?:&(.*)|)$ [NC]
RewriteRule ^ %{REQUEST_URI}?v=33 [R=301,L]

2017-01-06 08:41:38

我们一直在为用户创建一个SaaS，并为他们提供一个脚本，以附加在他们的网站页面，它是不可能附加一个版本的脚本，因为用户将附加脚本到他们的网站的功能，我不能强迫他们改变版本，每次我们更新脚本

因此，我们找到了一种方法，在用户每次调用原始脚本时加载脚本的新版本

提供给用户的脚本链接

<script src="https://thesaasdomain.com/somejsfile.js" data-ut="user_token"></script>

脚本文件

if($('script[src^="https://thesaasdomain.com/somejsfile.js?"]').length !== 0) {
   init();
} else {
   loadScript("https://thesaasdomain.com/somejsfile.js?" + guid());
}

var loadscript = function(scriptURL) {
   var head = document.getElementsByTagName('head')[0];
   var script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = scriptURL;
   head.appendChild(script);
}

var guid = function() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
    });
}

var init = function() {
    // our main code
}

解释:

用户已经在他们的网站上附加了脚本，我们使用jQuery选择器检查脚本附加的唯一标记是否存在，如果不存在，则使用更新的标记(或版本)动态加载它

这是调用相同的脚本两次，这可能是一个性能问题，但它确实解决了强制脚本不从缓存加载的问题，而不将版本放在给定给用户或客户端的实际脚本链接中

免责声明:如果在您的情况下性能是一个大问题，请不要使用。

2017-11-08 08:27:59

如何强制客户端刷新JavaScript文件?

推荐文章

最新文章

标签