How to insert external stylesheet in JavaScript (dynamically)

Question

...with right path.

For example. I have script called foo.js. I'd like to insert stylesheet declaration which I can do with following instruction:

$('head').append('<link rel="stylesheet" href="/template/foo.css" type="text/css" />');

Problem: I have to put full path to the stylesheet file. So instead of /template/foo.css I have to put: http://hostname/directory/template/foo.css. I can't set it statically beacause script can be placed in different servers and different locations. So it can be: http://foo.com/bar/foo.css or http://foo.com/foo.css.

It would be very useful if I can get path of foo.js file on the server. That would be good enough beacause then I could set stylesheet location based on the javascrpt's file.

Answer 1

You can use window.location and obtain the path from that. For example for this page it is:

>>> window.location
http://stackoverflow.com/questions/2033742/how-to-insert-external-stylesheet-in-javascript-dynamically

Answer 2

I've always done:

$('body').append('<link rel="stylesheet" href="/template/foo.css" type="text/css" />');

instead of head

Ahh... sorry I just realised what your problem is. One strategy is to extract the path of the script from the DOM itself:

$('script').each(function(i,el){
    var path = el.src.match(/^(.+)\/foo.js$/);
    if (path) {
        $('body').append('<link rel="stylesheet" ' +
                                'href="' + path[1] + '/foo.css" ' +
                                'type="text/css" />'
                        );
    }
})

Answer 3

This is a common technique that I use to get the current script url:

var scriptUrl = (function() {
  var scripts = document.getElementsByTagName('script'),
      script = scripts[scripts.length - 1];

  return script.src;
})();

It works basically because when the script is being executed, it is the last script tag on the DOM.