获取动态加载的跨域 JavaScript 文件当前正在执行的 JavaScript 代码的文件路径

Question

我需要加载跨域 JavaScript
我的站点中的书签动态文件http://jsbookmarklets.com/

解决方案应满足：

• 获取当前文件的路径
• 当前网页和执行的JS文件的域不同
• 解决方案应该是跨浏览器的
• 可能会同时异步加载多个脚本（这就是为什么下面提到的相关问题不适合的原因）

我想获取当前执行 JavaScript 代码的文件路径，以便动态加载更多资源（更多 CSS 文件和 JS 文件，如自定义代码和 jQuery、jQuery UI 和 Ext JS 库) 存储在与 JavaScript Bookmarklet 相同/相对的文件夹中。

以下方法不适合我的问题：

var scripts = document.getElementsByTagName("script");
var src = scripts[scripts.length-1].src;
alert("THIS IS: "+src);

不适合我的问题的相关问题：

• Get the url of currently executing js file when dynamically loaded
• Get script path

Answer 1

我正在使用的当前解决方案，它有效，但非常冗长：

var fnFullFilePathToFileParentPath = function(JSFullFilePath){
    var JSFileParentPath = '';
    if(JSFullFilePath) {
        JSFileParentPath = JSFullFilePath.substring(0,JSFullFilePath.lastIndexOf('/')+1);
    } else {
        JSFileParentPath = null;
    }
    return JSFileParentPath;
};

var fnExceptionToFullFilePath = function(e){
    var JSFullFilePath = '';

    if(e.fileName) {    // firefox
        JSFullFilePath = e.fileName;
    } else if (e.stacktrace) {  // opera
        var tempStackTrace = e.stacktrace;
        tempStackTrace = tempStackTrace.substr(tempStackTrace.indexOf('http'));
        tempStackTrace = tempStackTrace.substr(0,tempStackTrace.indexOf('Dummy Exception'));
        tempStackTrace = tempStackTrace.substr(0,tempStackTrace.lastIndexOf(':'));
        JSFullFilePath = tempStackTrace;
    } else if (e.stack) {   // firefox, opera, chrome
        (function(){
            var str = e.stack;
            var tempStr = str;

            var strProtocolSeparator = '://';
            var idxProtocolSeparator = tempStr.indexOf(strProtocolSeparator)+strProtocolSeparator.length;

            var tempStr = tempStr.substr(idxProtocolSeparator);
            if(tempStr.charAt(0)=='/') {
                tempStr = tempStr.substr(1);
                idxProtocolSeparator++;
            }

            var idxHostSeparator = tempStr.indexOf('/');
            tempStr = tempStr.substr(tempStr.indexOf('/'));

            var idxFileNameEndSeparator = tempStr.indexOf(':');
            var finalStr = (str.substr(0,idxProtocolSeparator + idxHostSeparator + idxFileNameEndSeparator));
            finalStr = finalStr.substr(finalStr.indexOf('http'));
            JSFullFilePath = finalStr;
        }());
    } else {    // internet explorer
        JSFullFilePath = null;
    }

    return JSFullFilePath;
};

var fnExceptionToFileParentPath = function(e){
    return fnFullFilePathToFileParentPath(fnExceptionToFullFilePath(e));
};

var fnGetJSFileParentPath = function() {
    try {
        throw new Error('Dummy Exception');
    } catch (e) {
        return fnExceptionToFileParentPath(e);
    }
};

var JSFileParentPath = fnGetJSFileParentPath();
alert('File parent path: ' + JSFileParentPath);

Answer 2

var s = document.createElement('script'); 
s.setAttribute('src', 'code.js'); 
document.body.appendChild(s);

你不能简单地这样做吗？

var myScriptDir = 'http://somesite.tld/path-to-stuff/';
var s = document.createElement('script'); 
s.setAttribute('src', myScriptDir + 'code.js'); 
document.body.appendChild(s); 
// code inside http://somesite.tld/path-to-stuff/code.js will use myScriptDir to load futher resources from the same directory.

如果您不想让脚本中的代码负责加载更多资源，您可以使用脚本标签的 onload 属性，例如s.onload=function(){...}。为了跨浏览器兼容性，您可能首先加载 jQuery，然后使用 getScript 函数。相关链接为http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet和http://api.jquery.com/jQuery.getScript/

Answer 3

一些cmets已经提到了这一点，但我会尽量详细说明。

找出当前脚本路径的最简单、最跨浏览器、跨域的方法是将脚本的路径硬编码到脚本本身中。

通常，您可能正在加载第三方脚本文件，因此这是不可能的。但在您的情况下，所有脚本文件都在您的控制之下。您已经添加了加载资源（CSS、JS 等）的代码，还不如包含脚本路径。