Modify URL in a HTML and inside CSS and Javascript

Question

Is it possible that JQuery to modify URL's in side a CSS or Javascript resource before its loads into the browser. Or at least as it loads in the browser?

URL usually pointing to resources, like images, fonts etc.

Basically I am thinking of this idea since I usually do large Single page web app/website which during development resources root path is relative, but in production the root path points to some other URL.

Is there something that solve this kind of problem? I am thinking like having a javascript that checks:

(psuedo-code)

var isDevMode = true;
if (isDevMode) {
 root_path = "/";
} else {
 root_path = "http://somewhere.com/"
}

So I just set it and all the path in my very big and complex HTML file, including the CSS in the page gets the right root path.

if I remember correctly, it is possible to load a css into a var of js, then you can use `.replace()`. Then [append it to head like this](http://stackoverflow.com/a/577002/908879) — ajax333221, May 15 '13 at 03:28
perhaps you could also try to rewrite it using paths like this `background:url('./images/body_bg.png');` — ajax333221, May 15 '13 at 03:35
whats on the server side? in asp.net its possible to override the Render method and regex for and replace links, but its a bit ugly. — monkeyhouse, May 15 '13 at 03:58
@user1778606 There is no server side for the SPA I do, at least that is tightly integrated. our design just call on resources from external storage service — quarks, May 15 '13 at 06:01

score 2 · Accepted Answer · edited May 23 '17 at 12:29

One way to modify your stylesheet paths inside your html would be to use the $("link") selector and modify it's html attribute. (code below)

To modify the actual paths for styles within a stylesheet that starts getting into jS CSS Parsing. You may want to take a look at the accepted answer here: CSS parser/abstracter? How to convert stylesheet into object

$(document).ready(function () {
    var isDevMode = true;
    var root_path = "";

    if (isDevMode) {
        root_path = "/";
    } else {
        root_path = "http://somewhere.com/";
    }

    $("link").each(function (index) {
        var existing_path = $(this).attr("href");
        $(this).attr("href", root_path + existing_path);
    });
});

see http://stackoverflow.com/questions/2126238/load-external-stylesheets-on-request ($('head').append('');) for loading the stylesheet? As long as its caching there shouldn't be too much page delay? — monkeyhouse, May 15 '13 at 04:09

Modify URL in a HTML and inside CSS and Javascript

1 Answers1