如何在我的< links>中使用变量html中的href路径 [英] How to use a variable in my <links> href path in html
问题描述
< link rel我的css文件版本化为强制浏览器清除缓存。 =stylesheethref =app / css / normalize.min.css？v = 0.0.1>
< link rel =stylesheethref =app / css / bootstrap.min.css？v = 0.0.1>
< link rel =stylesheethref =app / css / main.css？v = 0.0.1>
< link rel =stylesheethref =app / css / angular-chart.min.css？v = 0.0.1>
< link rel =stylesheethref =app / css / loading-bar.css？v = 0.0.1>
< link rel =stylesheethref =app / css / bootstrap-tour-standalone.min.css？v = 0.0.1>
我有下面的代码，它运行良好。我的疑问是如何使用它的变量？
示例：
<脚本> var version ='0.0.1'; < /脚本>
< link rel =stylesheethref =app / css / normalize.min.css？v = version>
我曾尝试类似这种方式
<脚本>
var version = 0.0.1;
$（function（）{
$（html）。find（'link'）。each（function（）{
var srcpath = $（this）.attr（'href '）;
srcpath = srcpath.replace（'version'，version）
}）
}）
< / script>
但它没用。
html 中移除< link> 元素，使用 $。holdReady（）保存 .ready（）处理程序不被调用，请求所有资源使用 $ .when（）附加< link> 元素到文档具有 version 连接到资源路径，然后调用 $。holdReady（false）来触发 .ready（） / code>处理程序，当所有 < link> 加载事件已被触发
样式表加载事件
您可以通过观察
加载事件来确定何时加载样式表;同样，您可以通过观察错误事件来检测错误是否发生
时处理样式表
var version =？v = 0.0.1;
// URL的数组请求
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）。
.then（function（）{
$ .holdReady（false）
}）;
$（document）.ready（function（）{
//当所有的< link>元素被附加到< head>时， }）
plnkr http://plnkr.co/edit/WlJMT04hmCy7SYClc6my?p=preview
I'm versionating my css files to "force the browser" clear cache when I want.
<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">
I have the following code, which is working well. My doubt is how to use a variable on it ?
Example:
<script> var version = '0.0.1'; </script>
<link rel="stylesheet" href="app/css/normalize.min.css?v=version">
I have tried something like this
<script>
var version = 0.0.1;
$(function(){
$("html").find('link').each(function(){
var srcpath = $(this).attr('href');
srcpath = srcpath.replace('version', version)
})
})
</script>
but it didnt work.
解决方案 You can remove <link> elements from html, use $.holdReady() to hold .ready() handler from being called, request all resources using $.when() append <link> elements to document having version concatenated to path to resource, then call $.holdReady(false) to fire .ready() handlers when all <link> load events have been fired
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>`
})
plnkr http://plnkr.co/edit/WlJMT04hmCy7SYClc6my?p=preview
这篇关于如何在我的< links>中使用变量html中的href路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
