我想在JavaScript文件的源路径末尾附加一个随机数或时间戳,以便每次页面重新加载时都会下载最新版本。
应该像这样:
<script type="text/javascript" src="/js/1.js?v=1234455"/>
我该如何生成并添加这个数字?这是一个简单的HTML页面,因此不能使用任何PHP或JSP相关的代码。
我想在JavaScript文件的源路径末尾附加一个随机数或时间戳,以便每次页面重新加载时都会下载最新版本。
应该像这样:
<script type="text/javascript" src="/js/1.js?v=1234455"/>
我该如何生成并添加这个数字?这是一个简单的HTML页面,因此不能使用任何PHP或JSP相关的代码。
方法一
可以通过这种方式添加许多扩展,包括异步包含和脚本延迟加载。许多广告网络和高流量网站都使用这种方法。
<script type="text/javascript">
(function(){
var randomh=Math.random();
var e = document.getElementsByTagName("script")[0];
var d = document.createElement("script");
d.src = "//site.com/js.js?x="+randomh+"";
d.type = "text/javascript";
d.async = true;
d.defer = true;
e.parentNode.insertBefore(d,e);
})();
</script>
方法二(AJZane的评论)
一个小巧而强大的包含方式,你可以精确地看到JavaScript在哪里被触发,并且它比方法1更加简洁(到点)。
<script>document.write("<script type='text/javascript' src='//site.com
/js.js?v=" + Date.now() + "'><\/script>");</script>
大多数时区每年都会重置(倒退)时钟一次
由于某种原因,在重新启动时计算机会重置本地时间
自动网络时间同步导致您的时钟在本地时间与服务器时间不同时向后调整几秒/分钟
旅行时调整时区设置(IIS 上的宇航员每隔几分钟穿越一个时区...让我们不要降低他们的浏览体验:P)
用户喜欢重置系统时钟来捣乱
为什么增量或唯一版本控制是好的 :)
对于仅限于前端的解决方案,我的建议是设置一个明确的版本,这可以由您或您的团队成员每次更改文件时简单地硬编码。手动执行与您在问题代码中所做的完全相同的操作是一个好习惯。
您或您的团队应该是唯一编辑您的JS文件的人,因此关键点不是您的文件需要每次都新鲜呈现,而是当它 更改 时需要新鲜呈现。在您的情况下,浏览器缓存并不是坏事,但您需要告诉最终用户 何时 更新。实质上,当您的文件更新时,您希望确保客户端获取更新的副本。通过这种方式,您还可以享有能够回滚到以前版本的代码而不必担心客户端缓存问题的额外优势。唯一的缺点是您需要尽职尽责确保在更新JS文件时实际更新版本号。请记住,仅因为某些事情不是自动化的,这并不意味着它一定是不良实践或不规范的。让您的解决方案适合您的情况和可用资源。
我建议使用类似语义化版本控制的表单规则,通过查看文件名(假设开发过程中没有人搞砸他们的版本编号),轻松识别向后或破坏性兼容性。除非您有奇怪的用例,否则没有理由每次都强制向客户端传递新副本。 使用本地存储在客户端自动增加版本号 如果您想要一种前端方式来自动为您生成唯一的版本号,以便您不必显式设置它,则必须实现某种本地存储方法来跟踪和自动递增文件版本。下面所示的解决方案将失去语义化版本控制的能力,并且如果用户知道如何清除本地存储,则有可能被重置。但是,考虑到您的选项仅限于客户端解决方案,这可能是您最好的选择:<script type="text/javascript">
(function(){
/**
* Increment and return the local storage version for a given JavaScript file by name
* @param {string} scriptName Name of JavaScript file to be versioned (including .js file extension)
* @return {integer} New incremented version number of file to pass to .js GET parameter
*/
var incrementScriptVer = function(scriptName){
var version = parseInt(localStorage.getItem(scriptName));
// Simple validation that our item is an integer
if(version > 0){
version += 1;
} else {
// Default to 1
version = 1;
}
localStorage.setItem(scriptName, version);
return version;
};
// Set your scripts that you want to be versioned here
var scripts = ['foo.js', 'bar.js', 'baz.js'];
// Loop through each script name and append our new version number
scripts.map(function(script){
var currentScriptVer = incrementScriptVer(script);
document.write("<script language='text/javascript' type='text/javascript' src='http://yoursite.com/path/to/js/" + script + "?version=" + currentScriptVer + " '><\/script>");
});
})();
</script>
为了完整起见,如果您正在从生成“随机”编号或日期的旧系统转换到递增版本化系统,请确保您不会在新的版本控制系统中跨越任何可能随机生成的文件名。如果有疑问,在更改方法时添加前缀到GET变量上,或者干脆添加一个新的GET变量。例如:“foo.js?version=my_prefix_121216”或“foo.js?version=121216&version_system=incremental”。
通过AJAX调用和其他方法进行自动化版本控制(如果后端开发是可能的)
个人而言,我喜欢避免使用本地存储选项。如果该选项可用,则是“最佳”解决方案。尝试让后端开发人员创建一个端点来跟踪JS文件的版本号,您始终可以使用该端点的响应来确定您的版本号。如果您已经使用像Git这样的版本控制,还可以选择其中一个Dev Ops团队将您的版本控制绑定到提交版本以获得非常出色的集成。
对于RESTful GET端点的jQuery解决方案可能如下:
var script = "foo.js";
// Pretend this endpoint returns a valid JSON object with something like { "version": "1.12.20" }
$.ajax({
url: "//yoursite.com/path/to/your/file/version/endpoint/" + script
}).done(function(data) {
var currentScriptVer = data.version;
document.write("<script language='text/javascript' type='text/javascript' src='http://yoursite.com/path/to/js/" + script + "?version=" + currentScriptVer + " '><\/script>");
});
通过 document.createElement('script')
动态插入脚本,然后在设置URL时,可以使用 new Date().getTime()
添加额外的参数。
如果你担心你的JavaScript在脚本加载之前执行,你可以使用脚本元素的 onload
回调函数(请注意,IE需要跳过一些步骤)。
$(document).ready(function(){
var randomNum = Math.ceil(Math.random() * 999999);
var jsfile = 'scripts/yourfile.js?v=' + randomNum;
$.getScript(jsfile, function(data, textStatus, jqxhr) { });
});
参考链接: http://api.jquery.com/jQuery.getScript/
(请勿忘记标记为答案。)
该网站介绍了 jQuery 中的 getScript() 方法。此方法可异步加载并执行 JavaScript 文件。// get first script
var script = document.getElementsByTagName('script')[0]
var new = document.createElement("script");
// add the source with a timestamp
new.src = 'yoursource.js?' + new Date.getTime().toString();
new.type = 'text/javascript'
script.parentNode.insertBefore(new,script);
如果不是字母数字,则替换正则表达式 Date.prototype.toISOString()
var today = new Date();
"MyFile_" + today.toISOString().replace(/[^\w]/g, "") + ".pdf"
MyFile_20191021T173426146Z.pdf
虽然这是一篇旧文章,但这里有一个简短的代码:
<script src="../Scripts/source/yourjsname.js?ver<%=DateTime.Now.Ticks.ToString()%>" type="text/javascript"></script>
Math.Random
替换为Date New
,以免有任何句号。 - TheBlackBenzKid<script>document.write("<script type='text/javascript' src='//site.com/js.js?v=" + Date.now() + "'><\/script>");</script>
- AJ Zane