清除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和时间将会刷新)。不能走正确的道路,总会有另一个更好的解决办法。 最好的问候和愉快的野营。