如何从当前源文件的工作目录加载 javascript 源代码？

Question

我有一个 CGI 应用程序，它已经正常工作了很长时间，但最近坏了，显然是因为从哪里加载 js 脚本的规则发生了变化。我正在使用this answer 的解决方案从外部源有条件地加载 js 代码。我的代码版本如下所示：

function load_external_js(s) {
  // usage: load_external_js({src:"http://foo.com/bar.js",
  //                        element:"head",type:"text/javascript"});
  // ... defaults (the values shown above) are provided for element and type
  // http://stackoverflow.com/a/15521523/1142217
  // src can be a url or a filename
  var js = document.createElement("script");
  js.src = s.src;
  js.type = (typeof s.type === 'undefined') ? 'text/javascript' : s.type;
  var element = (typeof s.element === 'undefined') ? 'head' : s.element;
  var e = document.getElementsByTagName(element)[0];
  e.appendChild(js);
    // BUG -- no error handling if src doesn't exist
}

我遇到的问题似乎与浏览器或服务器在这种情况下如何解析相对文件路径有关。我在做的是这样的：

load_external_js({src:"foo.js"});

这用于从调用 js 脚本所在的同一目录加载foo.js，类似于/var/www/html/js/3.0.4。但是最近这种行为发生了变化，在目录/usr/lib/cgi-bin/myapp中搜索该文件，大概是因为该html是由CGI脚本生成的。我可以像这样对目录进行硬编码：

load_external_js({src:"/js/3.0.4/mathjax_config.js"});

但这很难看，我必须有一些机制来设置版本号。纯js中是否有某种方法可以做到这一点，以便从与调用脚本所在的目录相同的目录加载脚本？谷歌搜索已经找到了很多涉及 node.js 或 jquery 的答案，但我没有使用这些。

Answer 1

如果不复制您正在使用的设置，很难对此进行测试，但根据我的经验，这应该可以正常工作：

var load_external_js = (function () {
  var base = document.currentScript.src;
  var a = document.createElement('a');
  a.href = base.split('/').slice(0, -1).join('/') + '/';

  var resolve = function (src) {
    var a = this.cloneNode();
    a.href += src;
    return a.href;
  }.bind(a);

  return function (s) {
    // usage: load_external_js({src:'http://foo.com/bar.js',
    //                        element:'head',type:'text/javascript'});
    // ... defaults (the values shown above) are provided for element and type
    // http://stackoverflow.com/a/15521523/1142217
    // src can be a url or a filename
    var js = document.createElement('script');
    js.src = resolve(s.src); // relative to <script> this is closure is in
    js.type = (typeof s.type === 'undefined') ? 'text/javascript' : s.type;
    var element = (typeof s.element === 'undefined') ? 'head' : s.element;
    var e = document.getElementsByTagName(element)[0];
    e.appendChild(js);
  };
})();

Answer 2

如果您也可以访问html 标记，请尝试使用<base> 元素或直接使用document.baseURI 并自己构建完整路径。