Is there a simple and reliable way to determine the URL of the currently-executing JavaScript file (inside a web page)?
My only thought on this is to scan the DOM for all the script src
attributes to find how the current file was referenced and then figure out the absolute URL by applying it to document.location
. Anyone have other ideas, is there some super-easy method I completely overlooked?
UPDATE: Script elements accessed via the DOM already have a src
property which contains the full URL. I don't know how ubiquitous/standard that is, but alternatively you can use getAttribute("src")
which will return whatever raw attribute value is in the [X]HTML.
Put this in the js file that needs to know it's own url.
Fully Qualified (eg
http://www.example.com/js/main.js
):Or As it appears in source (eg
/js/main.js
):See http://www.glennjones.net/Post/809/getAttributehrefbug.htm for explanation of the
getAttribute
parameter being used (it's an IE bug).If this is a strictly client solution, yours sounds pretty good.
If you are writing code on the server, you could probably just populate a div/hidden field/(insert your fave HTML element here) with the fully resolved URL to the script, and pick that up with your javascript on the clientside.
For recent browsers, you can use document.currentScript to get this information.
The upside is that it's more reliable for scripts that are loaded asynchronously. The downside is that it's not, as best I know, universally supported. It should work on Chrome >= 29, FireFox >= 4, Opera >= 16. Like many useful things, it doesn't seem to work in IE.
When I need to get a script path, I check to see if document.currentScript is defined, and, if not, use the method described in the accepted answer.
https://developer.mozilla.org/en-US/docs/Web/API/document.currentScript
This method work with defer, async and lazy loading Since you know the filename of your script, and if it will be unique
a jquery plugin template with it: https://github.com/mkdgs/mkdgs-snippet/blob/master/javascript/jquery.plugins.template.js
note: this will not work with local script loaded by jQuery.getScript(), since there is no script tag added into the dom. the script is only evaluated in global space. http://api.jquery.com/jQuery.getScript/
to fix it you can do something like:
You may want to have a look at https://addons.mozilla.org/en-US/firefox/addon/10345 if you're interested in learning which functions (and thus which file) are executing on a page you don't control.
If you're interested in figuring out which of your scripts is executing, then there are a number of ways. With Firebug you could
console.log()
the information. Even just putting alert statements in your code (while annoying) can help debug in a low-tech way. You could also raise errors and catch them, then process using properties of the error (see: https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Error)However, why would this be important? If the script is causing errors already then it's easy enough to determine where the error is occurring. If it's not about errors at all, then what's the advantage in knowing which file it comes from?
As it appears in source (e.g.
/js/main.js
), this is cross-browser:Fully Qualified (e.g.
http://www.example.com/js/main.js
):After some tests it seems hard to get the fully qualified one in a cross-browser way. The solution suggested by Crescent Fresh does not work in IE8 to get the fully qualified, even if it works in IE7