清除JavaScript中的caching

如何清除JavaScript的浏览器caching?

我们部署了最新的JavaScript代码,但是我们无法获得最新的JavaScript代码。

你可以调用window.location.reload(true)重载当前页面。 它将忽略任何caching项目,并从服务器中检索页面,css,图像,JavaScript等的新副本。 这不会清除整个caching,但是会清除您所在页面的caching。

但是,您的最佳策略是对各种其他答案中提到的path或文件名进行版本化。 此外,请参阅修改文件名:不要使用querystring作为您的版本控制scheme,不要使用?v=n作为原因。

您无法使用javascript清除caching。 一个常用的方法是将修订版本号或上次更新的时间戳添加到文件中,如下所示:

 myscript.123.js 

要么

myscript.js?updated=1234567890

尝试更改JavaScript文件的src? 由此:

 <script language="JavaScript" src="js/myscript.js"></script> 

对此:

 <script language="JavaScript" src="js/myscript.js?n=1"></script> 

这个方法应该强制你的浏览器加载一个JS文件的新副本。

除了每小时或每周caching外,您可以根据文件数据进行caching。

例子(在PHP中):

 <script src="js/my_script.js?v=<?=md5_file('js/my_script.js')?"></script> 

甚至:

 <script src="js/my_script.js?v=<?=filemtime('js/my_script.js');?>"></script> 

您也可以在PHP中每隔一小时强制一次代码重新加载:

 <?php echo '<script language="JavaScript" src="js/myscript.js?token='.date('YmdH').'">'; ?> 

要么

 <script type="text/javascript" src="js/myscript.js?v=<?php echo date('YmdHis'); ?>"></script> 

把这个放在你的模板的末尾:

 var scripts = document.getElementsByTagName('script'); var torefreshs = ['myscript.js', 'myscript2.js'] ; // list of js to be refresh var key = 1; // change this key every time you want force a refresh for(var i=0;i<scripts.length;i++){ for(var j=0;j<torefreshs;j++){ if(scripts[i].src && (scripts[i].src.indexOf(torefreshs[j]) > -1)){ new_src = scripts[i].src.replace(torefreshs[j],torefreshs[j] + 'k=' + key ); scripts[i].src = new_src; // change src in order to refresh js } } } 

尝试使用这个

  <script language="JavaScript" src="js/myscript.js"></script> 

对此:

  <script language="JavaScript" src="js/myscript.js?n=1"></script> 

以下是我用于最新项目的一个片段。

从控制器:

 if ( IS_DEV ) { $this->view->cacheBust = microtime(true); } else { $this->view->cacheBust = file_exists($versionFile) // The version file exists, encode it ? urlencode( file_get_contents($versionFile) ) // Use today's year and week number to still have caching and busting : date("YW"); } 

从视angular来看:

 <script type="text/javascript" src="/javascript/somefile.js?v=<?= $this->cacheBust; ?>"></script> <link rel="stylesheet" type="text/css" href="/css/layout.css?v=<?= $this->cacheBust; ?>"> 

我们的发布过程生成一个包含当前版本号的文件。 这通过对该文件进行URL编码并将其用作高速缓冲存储器来工作。 作为故障切换,如果该文件不存在,则使用年份和星期编号,以便caching仍然有效,并且每周至less刷新一次。

此外,这为开发环境中的每个页面加载提供caching清除,以便开发人员不必担心清除caching中的任何资源(javascript,css,ajax调用等)。

或者你可以通过file_get_contets通过服务器来读取js文件,然后在头文件中joinecho的js内容

如果你使用php可以这样做:

<script src="js/myscript.js?rev=<?php echo time();?>" type="text/javascript"></script>

我在yboussard提出的代码中遇到了一些麻烦。 内部j循环不起作用。 这是我成功使用的修改后的代码。

 function reloadScripts(toRefreshList/* list of js to be refresh */, key /* change this key every time you want force a refresh */) { var scripts = document.getElementsByTagName('script'); for(var i = 0; i < scripts.length; i++) { var aScript = scripts[i]; for(var j = 0; j < toRefreshList.length; j++) { var toRefresh = toRefreshList[j]; if(aScript.src && (aScript.src.indexOf(toRefresh) > -1)) { new_src = aScript.src.replace(toRefresh, toRefresh + '?k=' + key); // console.log('Force refresh on cached script files. From: ' + aScript.src + ' to ' + new_src) aScript.src = new_src; } } } } 

我倾向于版本框架,然后将版本号应用于脚本和样式path

 <cfset fw.version = '001' /> <script src="/scripts/#fw.version#/foo.js"/> 
 window.parent.caches.delete("call") 

在控制台中执行代码后closures并打开浏览器。

Cache.delete()可用于新的Chrome,Firefox和Opera。

也许“清除caching”并不像应该那样容易。 我意识到, “触摸”文件实际上会改变服务器上caching的源文件的date(在Edge,Chrome和Firefox上testing),大多数浏览器都会自动下载最新的你的服务器上有什么(代码,graphics,任何多媒体)。 我build议你在程序运行之前先复制服务器上最新的脚本,然后做“触摸事物”的解决scheme,以便将所有问题文件的date更改为最新的date和时间,然后下载新的副本到您的浏览器:

 `<?php touch('/www/control/file1.js'); touch('/www/control/file2.js'); touch('/www/control/file2.js'); ?>` 

…你的程序的其余部分…

这花了我一些时间来解决这个问题(因为许多浏览器对不同的命令有不同的作用,但是它们都会检查文件的时间,并且在浏览器中比较下载的副本,如果不同的date和时间将会刷新)。不能走正确的道路,总会有另一个更好的解决办法。 最好的问候和愉快的野营。