How can code in a JavaScript file get the file's URL?

Question

I need to dynamically load a CSS stylesheet into a page that's on a different domain. How can I get the complete URL of the JS file to use in the href attribute of the stylesheet?

For instance, here is the structure:

http://bla.com/js/script.js

http://bla.com/css/style.css

I want to dynamically load the stylesheet into a page http://boo.net/index.html. The problem is, I don't know the bla.com bit in advance, just the fact that the stylesheet is in ../css/ relative to the JS file.

The script is, of course, included on index.html. jQuery's fine too.

Answer 1

You can read document.location, but you could also just use relative URLs

Answer 2

You could look in the script tag for the javascript location, and by using document.location you could probably determine the relative addressing, in order to determine where the css file may be.

Answer 3

Add an ID to the script tag:

<script type="text/javascript" id="myScript" src="http://bla.com/js/script.js"&gt;&lt;/script&gt;

And in http://bla.com/js/script.js:

var myScript = document.getElementById('myscript');
var myScriptSrc = myScript.getAttribute('src');
alert(myScriptSrc); // included for debugging

You should be able to manipulate the value of myScriptSrc to obtain the path to any other content on bla.com.

I think this sample is what James Black meant in his answer.

Lastly, to everyone suggesting the use of document.location, please keep in mind that if you want read-only access to the current page address, you should be using document.URL or window.location. If you want to set the page address, you should always use window.location.href. Although window.location = 'location'; works, it has always bothered me to see a String being assigned to a Location. I'm not sure why since JavaScript allows all sorts of other implicit type conversions.

• mozilla reference: document.location was originally a read-only property, although Gecko browsers allow you to assign to it as well. For cross-browser safety, use window.location instead. To retrieve just the URL as a string, the read-only document.URL property can be used.
• Sun reference: Do not use location as a property of the document object; use the document.URL property instead. The document.location property, which is a synonym for document.URL, is deprecated.

Answer 4

Stack property of error objects can provide URL information.

try 
{ 
  throw new Error();
}
catch(exc)
{
  console.log(exc.stack);
}

Unfortunately, Webkit doesn't (but Chromium does) support stack property. There are a few browsers supporting this feature: http://173.45.237.168/reference/html/api/Error.html#Error.stack

Instead of stack, Webkit provides sourceURL property, here is the exampe usage:

try 
{ 
  throw new Error();
}
catch(exc)
{
  console.log(exc.sourceURL);
}