Question

我需要加载跨域JavaScript
为我的网站http://jsbookmarklets.com/

中的bookmarklet动态生成文件

解决方案应满足：

获取当前文件的路径
当前网页的域名和执行中的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);

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

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

有些评论已经提到了这一点，但我会尝试详细说明。

最简单，最跨浏览，跨域的方法来确定当前脚本的路径是将脚本的路径硬编码到脚本本身。

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

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

3 个答案: