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 — ajax333221
– ajax333221, Commented May 15, 2013 at 3:28
perhaps you could also try to rewrite it using paths like this background:url('./images/body_bg.png'); — ajax333221
– ajax333221, Commented May 15, 2013 at 3: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
– monkeyhouse, Commented May 15, 2013 at 3: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
– quarks, Commented May 15, 2013 at 6:01

Community · Accepted Answer · 2017-05-23 12:29:22Z

2

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);
    });
});

edited May 23, 2017 at 12:29

CommunityBot

11 silver badge

answered May 15, 2013 at 3:53

Dylan Hayes

2,3661 gold badge24 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

monkeyhouse Over a year ago

see stackoverflow.com/questions/2126238/… ($('head').append('<link rel="stylesheet" type="text/css" href= 'css_path'>');) for loading the stylesheet? As long as its caching there shouldn't be too much page delay?

Collectives™ on Stack Overflow

Modify URL in a HTML and inside CSS and Javascript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related