我正在对我的 css 文件进行版本控制，以便在需要时“强制浏览器”清除缓存。
<link rel="stylesheet" href="app/css/normalize.min.css?v=0.0.1">
<link rel="stylesheet" href="app/css/bootstrap.min.css?v=0.0.1">
<link rel="stylesheet" href="app/css/main.css?v=0.0.1">
<link rel="stylesheet" href="app/css/angular-chart.min.css?v=0.0.1">
<link rel="stylesheet" href="app/css/loading-bar.css?v=0.0.1">
<link rel="stylesheet" href="app/css/bootstrap-tour-standalone.min.css?v=0.0.1">
我有以下代码，运行良好。我的疑问是如何在其上使用变量？
例子:
<script> var version = '0.0.1'; </script>
<link rel="stylesheet" href="app/css/normalize.min.css?v=version">
我试过这样的事情
<script>
var version = 0.0.1;
$(function(){
$("html").find('link').each(function(){
var srcpath = $(this).attr('href');
srcpath = srcpath.replace('version', version)
})
})
</script>
但是没用。
最佳答案
您可以删除 <link>来自 html 的元素, 使用 $.holdReady()持有.ready()调用处理程序，使用 $.when() 请求所有资源附加 <link>元素 document有version连接到资源路径，然后调用 $.holdReady(false)开火 .ready()处理程序时所有 <link> load events已被解雇
Stylesheet load events
You can determine when a style sheet has been loaded by watching for a load event to fire on it; similarly, you can detect if an error has occurred while processing a style sheet by watching for an error event
var version = "?v=0.0.1";
// array of URL's to request
var links = ["app/css/normalize.min.css", "app/css/bootstrap.min.css", ..];
$.holdReady(true);
$.when.apply($, $.map(links, function(path) {
return new $.Deferred(function(d) {
$("<link>", {href: path + version, rel: "stylesheet"})
.appendTo("head").on("load", d.resolve);
})
}))
.then(function() {
$.holdReady(false)
});
$(document).ready(function() {
// do stuff when all `<link>` elements have been appended to `<head>`
})
关于javascript - 如何在 html 中的 <links> href 路径中使用变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38853539/