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

0 votes
asked Aug 14, 2009 by montrealist

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.

7 Answers

0 votes
answered Aug 14, 2009 by bjelli

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

0 votes
answered Aug 14, 2009 by james-black

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.

0 votes
answered Aug 14, 2009 by grant-wagner

Add an ID to the script tag:

<script type="text/javascript" id="myScript" src="http://bla.com/js/script.js"></script>

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.
0 votes
answered Aug 15, 2010 by sid3k

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);
}
0 votes
answered Aug 11, 2011 by toby

With Jquery, you could do something like:

$('script[src$="my_script.js"]').attr('src').replace('my_script.js','');
// outputs something like: "/static/js/"
0 votes
answered Aug 21, 2013 by bradt
var JS_SELF_URL = (function() {
    var script_tags = document.getElementsByTagName('script');
    return script_tags[script_tags.length-1].src;
})();

As the browser parses tags, it also downloads and executes them. Therefore when your JS file is executed it is currently the last tag parsed.

0 votes
answered Aug 28, 2014 by patrick-roberts

Even easier than using an id is to just leave the markup alone and use document.currentScript. The link to MDN mentions under the Notes section, a small quirk requiring the JavaScript to execute synchronously, and I'm about to explain how to avoid this pitfall.

It's important to note that this will not reference the <script> element if the code in the script is being called as a callback or event handler; it will only reference the element while it's initially being processed.

The advantage of this solution is that you are not required to use special markup, and this is especially helpful if you can't access the HTML yourself for some reason (e.g. if it's used by a client or a developer using your API).

If the script is executed synchronously (meaning the main content of the script isn't wrapped in an event listener or some other function set to evaluate later than when the code is "initially being processed" ), you can simply use document.currentScript to access the currently processing <script> element of your code. To demonstrate how to use this effectively, I'll provide a basic demo below.

HTML:

<script type="text/javascript" src="http://bla.com/js/script.js"></script>

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

var myScript = document.currentScript,
    mySrc = myScript.getAttribute('src');

console.log(mySrc); // "http://bla.com/js/script.js"

$(function () {
    // your other code here, assuming you use jQuery
    // ...
});

If you don't want the variable to be exposed to the global scope, you can also do this:

(function () {
    var myScript = document.currentScript,
        mySrc = myScript.getAttribute('src');

    console.log(mySrc); // "http://bla.com/js/script.js"

    $(function () {
        // your other code here
        // ...
    });
}()); // self-executing anonymous function

Basically the point is to make sure and access document.currentScript during synchronous execution of the script, otherwise it will not reference what you expect it to.

Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...