I need to load cross-domain JavaScript
files dynamically for bookmarklets in my site /

The solution should satisfy:

• Fetch the path of current file
• The domain of current web-page and JS file in execution are different
• The solution should be cross-browser
• Multiple scripts might be loaded at once asynchronously (that's why the related questions mentioned below are not a fit)

I want to get the file path of currently executing JavaScript code for dynamically loading few more resources (more CSS files and JS files like custom code and jQuery, jQuery UI and Ext JS libraries) which are stored in the same/relative folder as the JavaScript Bookmarklet.

The following approach does not fit my problem:

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

Related questions which do not fit my problem:

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

I need to load cross-domain JavaScript
files dynamically for bookmarklets in my site http://jsbookmarklets./

The solution should satisfy:

• Fetch the path of current file
• The domain of current web-page and JS file in execution are different
• The solution should be cross-browser
• Multiple scripts might be loaded at once asynchronously (that's why the related questions mentioned below are not a fit)

I want to get the file path of currently executing JavaScript code for dynamically loading few more resources (more CSS files and JS files like custom code and jQuery, jQuery UI and Ext JS libraries) which are stored in the same/relative folder as the JavaScript Bookmarklet.

The following approach does not fit my problem:

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

Related questions which do not fit my problem:

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

• javascript
• jquery
• cross-domain
• bookmarklet

Share Follow edited May 23, 2017 at 11:48 CommunityBot 111 silver badge asked Jan 1, 2013 at 13:11 webextensionswebextensions 73966 silver badges1515 bronze badges 10

• I don't see why the first related question does not answer yours. And please show us how you are dynamically loading scripts, it is substantial for getting the path. – Bergi Commented Jan 1, 2013 at 13:45
• The mentioned approach does not work for cross-domain JS files – webextensions Commented Jan 1, 2013 at 14:00
• Only the first sentence is relevant: It does not work in general, but there may be workarounds. However, you could just put a static variable for your path in your script that might be generated by a serverside script. – Bergi Commented Jan 1, 2013 at 14:04
• I am loading new JavaScript files using var s = document.createElement('script'); s.setAttribute('src', 'code.js'); document.body.appendChild(s); And I believe this is the only way possible for cross-domain files (modern cross-domain AJAX (like) requests are not an option since I need a generic solution which works on almost any random website) – webextensions Commented Jan 1, 2013 at 14:06
• 2 why not simply generate some part of your js file on server-side, smthg like var __domain = '$_HOST'; ? this will work in any browser, down to netscape. – c69 Commented Jan 9, 2013 at 21:36

 |  Show 5 more ments

3 Answers 3

Sorted by: Reset to default 4

The current solution that I'm using, which works, but is very lengthy:

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);

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

Can you not simply do this?

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.

If you don't want to have code inside the script to be responsible for loading further resources you can use the onload attribute of the script tag, like s.onload=function(){...}. For cross browser patibility you might first load jQuery and then use the getScript function. Relevant links are http://www.learningjquery./2009/04/better-stronger-safer-jquerify-bookmarklet and http://api.jquery./jQuery.getScript/

Some of the ments have already mentioned this, but I'll try to elaborate a bit more.

The simplest, most cross-browser, cross-domain way of figuring out the path of the current script is to hard-code the script's path into the script itself.

In general, you may be loading third-party script files, so this would not be possible. But in your case, all the script files are under your control. You're already adding code to load resources (CSS, JS, etc.), you might as well include the script path as well.