Javascript 如何在my<；中使用变量；链接>；html中的href路径

我正在对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">

var版本='0.0.1'；

我试过这样的东西

<script>
    var version = 0.0.1;
    $(function(){
        $("html").find('link').each(function(){
            var srcpath = $(this).attr('href');
            srcpath = srcpath.replace('version', version)
        })
    })
</script>

var版本=0.0.1；
$（函数（）{
$（“html”）.find（'link'）.each（函数（）{
var srcpath=$（this.attr（'href'）；
srcpath=srcpath.replace（'version'，version）
})
})

但它不起作用。

您可以从

html

中删除

元素，使用

$.holdReady（）

来阻止调用

.ready（）

处理程序，使用

$请求所有资源。当（）

将

元素附加到

文档中，并将
版本
连接到资源路径时，然后调用
$.holdReady（false）
在所有处理程序都被激发后激发
.ready（）
处理程序

样式表加载事件

您可以通过查看样式表是否已加载来确定样式表的加载时间
加载要在其上点火的事件；类似地，您可以检测是否存在错误
通过监视错误事件处理样式表时发生

var version=“？v=0.0.1”；
//要请求的URL的数组
var links=[“app/css/normalize.min.css”，“app/css/bootstrap.min.css”，…]；
$.holdReady（真）；
$.when.apply（$，$.map）（链接，函数（路径）{
返回新的延迟美元（函数（d）{
$（“”，{href:path+version，rel:“样式表”}）
.附录（“标题”）。在（“加载”，d.resolve）；
})
}))
.然后（函数（）{
$.holdReady（错误）
});
$（文档）.ready（函数（）{
//当所有``元素都被附加到``
})

plnkr
如果使用PHP作为服务器端语言，则可以使用与示例中相同的PHP变量。您需要将html文件保存为php文件，如
index.php
，以便能够引入php代码

<?php
$g_version = "0.0.1";

echo
'<link href="app/css/normalize.min.css?v=' .$g_version .'">' .
'<link href="app/css/bootstrap.min.css?v=' .$g_version .'">' .
'<link href="app/css/main.css?v=' .$g_version .'">' .
'<link href="app/css/angular-chart.min.css?v=' .$g_version .'">' .
'<link href="app/css/loading-bar.css?v=' .$g_version .'">' .
'<link href="app/css/bootstrap-tour-standalone.min.css?v=' .$g_version .'">';
?>



或者，如果要保持文本编辑器的html颜色高亮显示，也可以这样做：

<?php
$g_version = "0.0.1";
?>

<link href="app/css/normalize.min.css?v=<?php echo $g_version; ?>">
<link href="app/css/bootstrap.min.css?v=<?php echo $g_version; ?>">
<link href="app/css/main.css?v=<?php echo $g_version; ?>">
<link href="app/css/angular-chart.min.css?v=<?php echo $g_version; ?>">
<link href="app/css/loading-bar.css?v=<?php echo $g_version; ?>">
<link href="app/css/bootstrap-tour-standalone.min.css?v=<?php echo $g_version; ?>">


通过快速搜索，这可能与您正在更改
srcpath
的内容有关，但与
元素的
href
属性无关。请注意，即使这样做有效，也可能导致CSS文件被下载两次；一次是在加载页面时，另一次是在更改版本时。嗯，在客户端上这样做太晚了。。。您将导致文件多次加载，这将导致不同的问题。这应该在服务器端完成。非常好的方法！否决票的原因？这实际上比使用jQuery加载每个css文件更有效。我在我的许多网站上都使用过这种方法。
<?php
$g_version = "0.0.1";
?>

<link href="app/css/normalize.min.css?v=<?php echo $g_version; ?>">
<link href="app/css/bootstrap.min.css?v=<?php echo $g_version; ?>">
<link href="app/css/main.css?v=<?php echo $g_version; ?>">
<link href="app/css/angular-chart.min.css?v=<?php echo $g_version; ?>">
<link href="app/css/loading-bar.css?v=<?php echo $g_version; ?>">
<link href="app/css/bootstrap-tour-standalone.min.css?v=<?php echo $g_version; ?>">