Get script path

Question

In CSS, any image path is relative to the CSS file location.

f.ex if I put the CSS file in /media/css/mystyles.css and use something like

.background:url(../images/myimage.jpg); 

The browser will look for the image in /media/images/myimage.jpg which makes sense.

Is it possible to do the same thing in javascript?

F.ex if I include /media/js/myscript.js and put this code in there:

var img = new Image(); img.src = '../images/myimage.jpg'; 

Th image is not found, since browser is using the HTML file as a starting point, instead of the script location. I would like to be able to use the script location as a starting point, just like CSS does. Is this possible?

Answer 1

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.

Answer 2

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.