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并自行构建完整路径。

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

2 个答案: