How to use a variable in my <links> href path in html

vbotio

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.

guest271314

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to use a php variable in html a href code?

How to use variable in HTML img src path

How to use regex to extract links from HTML tag-attributes (src, data, href, or others)

Can I avoid html resetting my javascript variable when I use location.href?

How to configure nested path for links in html

How to use a prefix (path) in the href of a tag in Rails

How do i swap the old links in my a links href attribute values with the ones in my newLink array?

Variable href links? Images on a timer

Is there a way to use angular base href as variable in image path?

How do I use a variable in Js controller to my HTML

How to use the lxml to scrape a table and grab the href links?

How can I get href links from HTML using Python?

How can I extract all links (href) in an HTML file?

how to use variable in file path

How to use flask variable in href tag?

how to use a django variable in an <a> tag's href?

How to use BeautifulSoup to scrape links in a html

How to use input text in a href (HTML)

How to use "href=" for a static html file in svelte

How to assign a specific domain to all my links on my page in HTML?

How to handle duplicates in my PATH variable?

How do I capture the href id of my index.html page into my views.py file and use it to render my 2nd html page in Django

Use PHP variable in href inside of html inside of php?

How to use React Navigation universal links with path parameters on Android?

HTML href variable value

Rails 4: Any way to fix/use regular html href links w/o 'link_to'?

How to use getJSON on my html

How to use a declared variable as a path in MySQL?

How to use Optional Chaining if path is variable?