获取脚本路径

Question

在CSS中,任何图像路径都相对于CSS文件位置.

f.ex如果我把CSS文件放入/media/css/mystyles.css并使用类似的东西

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

浏览器将查找/media/images/myimage.jpg有意义的图像.

是否有可能在JavaScript中做同样的事情？

F.ex如果我包含/media/js/myscript.js并将此代码放在那里:

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

找不到图像,因为浏览器使用HTML文件作为起点,而不是脚本位置.我希望能够使用脚本位置作为起点,就像CSS一样.这可能吗？

Answer 1

<script>如上所述在DOM中搜索自己的标记是常用的方法,是的.

但是,你通常不需要太努力地搜索:当你在脚本的主体中 - 在包含时运行 - 你很清楚<script>你是哪个元素:最后一个元素.其余的人还没有解析过.

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';
}

如果您的脚本已与<script defer>(或在HTML5中<script async>)链接,则不适用.但是,这目前很少使用.

Answer 2

在更新的浏览器中,您可以使用该document.currentScript属性获取HTMLScript与该脚本对应的元素,然后查询其src属性.

在撰写本文时,我是否可以使用 70%的网络用户表示支持.显然Internet Explorer不支持它,但Edge确实支持它. MDC列出了对Chrome 29 +,Edge,Firefox 4.0 +,Gecko 2.0 +,Opera 16+和Safari 8+的支持.@mjhm的评论已经指出了这个特征,但那时它听起来非常实验性.

Answer 3

受上面的bobince回答的启发,我写了一个jQuery版本.以下是一行中的代码:

var scriptpath = $("script[src]").last().attr("src").split('?')[0].split('/').slice(0, -1).join('/')+'/';

编辑:script按src属性过滤标记,以便我们得到一个src来处理.

Answer 4

正如其他海报提到的那样,您需要先为脚本计算基本URL,您可以在下面的脚本中找到它.

// find the base path of a script
var settings = {};
settings.basePath = null;

if (!settings.basePath) {
  (function (name) {
    var scripts = document.getElementsByTagName('script');

    for (var i = scripts.length - 1; i >= 0; --i) {
      var src = scripts[i].src;
      var l = src.length;
      var length = name.length;
      if (src.substr(l - length) == name) {
        // set a global propery here
        settings.basePath = src.substr(0, l - length);

      }
    }
  })('myfile.js');
}

log(settings.basePath);