How to use a variable in my href path in html

Question

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.

From a quick search, this may be related to http://stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript — Patrick Barr, Aug 09 '16 at 14:29
You're changing the content of `srcpath` but not the `href` attribute of the `` element — Andreas, Aug 09 '16 at 14:30
Note that even if this worked, it may cause the CSS file to be downloaded twice; once when the page is loading, and again when you change the version. — Heretic Monkey, Aug 09 '16 at 14:36
Um, doing it on the client is way too late... You are going to cause files to load multiple times which will result in different issues. — epascarello, Aug 09 '16 at 14:36
You could remove `` elements from `html`, then append dynamically created `` elements to `html` at or before `.ready()` handler, see also http://stackoverflow.com/questions/38811052/how-to-create-class-in-a-custom-css-file-by-javascript/ — guest271314, Aug 09 '16 at 14:40
@guest271314 I dont think this is a good approach, because I have countless in my application. — vbotio, Aug 09 '16 at 14:42
@vbotio What do you mean by "countless"? There should be a definitive end to the number of `` elements in `document`. You can create an array of the URL's pointing to resources once, then iterate the array and append `` element to `document` with `href` set to URL with `version` concatenated, for each successful request for the resource — guest271314, Aug 09 '16 at 14:45

guest271314 · Accepted Answer · 2016-08-09T15:48:15.300

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

pmrotule · Answer 2 · 2016-08-10T07:00:12.273

If you use PHP as your server-side language, you can use a php variable the same way you did in your example. You will need to save your html file as a php file like index.php to be able to introduce php code.

<?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 .'">';
?>

Or you can go like this if you want to keep the html color highlight of your text editor:

<?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; ?>">

I removed rel="stylesheet" just to make it easier to read.

Reason for downvote? This is actually more efficient than using jQuery to load each css file. I have used this approach in many of my websites. — pmrotule, Aug 09 '16 at 20:04

How to use a variable in my href path in html

2 Answers2

Linked