Get script path
Searching the DOM for your own <script>
tag as above is the usual method, yes.
However, you usually needn't search too hard: when you're in the body of the script — run at include-time — you know very well which <script>
element you are: the last one. The rest of them can't have been parsed yet.
var scripts= document.getElementsByTagName('script');
var path= scripts[scripts.length-1].src.split('?')[0]; // remove any ?query
var mydir= path.split('/').slice(0, -1).join('/')+'/'; // remove last filename part of path
function doSomething() {
img.src= mydir+'../images/myimage.jpeg';
}
This doesn't hold true if your script has been linked with <script defer>
(or, in HTML5, <script async>
). However, this is currently rarely used.
On more recent browsers, you can use the document.currentScript
property to obtain the HTMLScript
element corresponding to that script, then query its src
property.
Can I use indicates support by 70% of the web’s users, at the time of this writing. Apparently Internet Explorer doesn’t support it, but Edge does. MDC lists support as Chrome 29+, Edge, Firefox 4.0+, Gecko 2.0+, Opera 16+ and Safari 8+. The comment by @mjhm already pointed out this feature, but back then it sounded very experimental.
Inspired by bobince answer above, I wrote a jQuery version. Here is the code in one line:
var scriptpath = $("script[src]").last().attr("src").split('?')[0].split('/').slice(0, -1).join('/')+'/';
Edit: Filter the script
tag by the src
attribute, so that we get a src to work on.