CODEWITHSUNDEEP
javascriptjqueryfiledynamicexternal
user1005240
user1005240

Reputation: 285

Call a function in one Javascript file from another Javascript file?

I need to call a function in an external ".js" file from another ".js" file, without referencing the external file in the <head> tag.

I know that it is possible to dynamically add an external ".js" file to the which allows access to that file, i can do that like so...

var AppFile = "test/testApp_1.js"; 
var NewScript=document.createElement('script');
var headID = document.getElementsByTagName("head")[0]; 
NewScript.src = AppFile;
headID.appendChild(NewScript);

However...

this is no use to me as the external files need to be stand-alone files that run start-up procedures on...

$(document).ready(function()
{...}

so adding the full file dynamically has an unwanted affect. Also, i cannot pre-reference the external file in the <head> tag as it needs to be dynamic. So, this external file "test/testApp_1.js" contains a function that returns a string variable...

function setAppLogo(){

 var LogoFile = "test/TestApp_1_Logo.png";

 return LogoFile;
}

I need access to either this function, or I could store the string as a global var in the external file... either way is fine, I just need access to the value in LogoFile without loading the whole external file.

This one has had me stumped for a few hours now so any ideas would be greatly appreciated.

Upvotes: 7

Views: 5981

Answers (6)

Michael Radionov
Michael Radionov

Reputation: 13309

It may be possible with the help of Web Workers. You would be able to run your script you've wanted to inject in kinda isolated environment, so it won't mess up your current page.

As you said, it is possible for setAppLogo to be global within "test/testApp_1.js", so I will rely on this statement.

In your original script you should create a worker, which references to a worker script file + listen to messages that would come from the worker:

var worker = new Worker('worker.js');
worker.onmessage = function (e) {
    // ....
};

Then, in the worker (worker.js), you could use special function importScripts (docs) which allows to load external scripts in worker, the worker can also see global variables of these scripts. Also there is a function postMessage available in worker to send custom messages back to original script, which in turn is listening to these messages (worker.onmessage). Code for worker.js:

importScripts('test/testApp_1.js');

// "setAppLogo" is now available to worker as it is global in 'test/testApp_1.js'

// use Worker API to send message back to original script
postMessage(setAppLogo());

When it invokes you'll get the result of setAppLogo in you listener:

worker.onmessage = function (e) {
    console.log(e.data); // "test/TestApp_1_Logo.png"
};

This example is very basic though, you should read more about Web Workers API and possible pitfalls.

Upvotes: 0

user1005240
user1005240

Reputation: 285

Ok, thanks everybody for all the input but i think that what I was trying to do is currently not possible, i.e. accessing a function from another file without loading that file. I have however found a solution to my problem. I now query my server for a list of apps that are available, i then use this list to dynamically build the apps in a UI. when an app is then selected i can then call that file and the functions within. Its a bit more complex but its dynamic, has good performance and, it works. Thanks again for the brainstorming! ;)

Upvotes: 0

throughnothing
throughnothing

Reputation: 106

You might benefit from having some sort of app.js file that contains global variables/values that you will want to use from lots of places. You should include this .js file on every page (and maybe minify it/concatenate it with other js if you want to be clever and improve performance). Generally these globals should be attached to some object you create such as var APPNAME = { }; with variables/functions on it that will be used from many places.

Once you have this, then the external '.js' file that you want to load, and the one you are currently in, can both access the global APPNAME variable and all its attributes/functions and use them as desired. This may be a better approach for making your javascript more modular and separatable. Hope this helps.

Upvotes: 1

Vatev
Vatev

Reputation: 7590

I'm not sure this is a good idea but you can create an iframe and eval the file inside its 'window' object to avoid most of the undesired side effects (assuming it does not try to access its parent). Then you can access whatever function/variable you want via the iframe's window object.

Example:

function loadSomeJsInAFrame(url,cb) {
        jQuery.get(url,function(res) {
            iframe = jQuery('<iframe></iframe>').hide().appendTo(document.body);
            iframe[0].contentWindow.eval(res);
        if(cb) cb(iframe[0].contentWindow);
    },'text');
}

loadSomeJsInAFrame('test/testApp_1.js',function(frameWindow) {
    console.log(frameWindow.setAppLogo());
    jQuery(frameWindow.frameElement).remove();
});

This will not guarantee that the sript in the file can not mess with your document, but not likely if it comes from a trusted source.

Also, don't forget to remove your iframe after you get what you need from it.

Upvotes: 0

Andrew Sklyarevsky
Andrew Sklyarevsky

Reputation: 2135

It is possible to load the whole script through XHR (e.g. $.get in jQuery) and then parse it, perhaps using a regular expression, to extract the needed part:

$.get('pathtoscript.js', function(scriptBody) {
    var regex = /function\s+setUpLogo\(\)\s*\{[^}]+}/g;
    alert(scriptBody.match(regex)[0]); // supposed to output a function called
                                       // 'setUpLogo' from the script, if the 
                                       // function does not have {} blocks inside
});

Nevertheless, it shall be noted that such an approach is highly likely to trigger maintenance obstacles. Regular expressions are not a best tool to parse JavaScript code; the example above, for instance, will not parse functions with nested {} blocks, which may well exist in the code in question.

It might be recommended to find a server-side solution to the problem, e.g. adding necessary script path or its part before the page is sent to browser.

Upvotes: 0

darkAsPitch
darkAsPitch

Reputation: 1875

You want to load the file once jQuery has loaded using ajax, and then run the related script in the successful ajax function.

See jQuery's getScript function: http://api.jquery.com/jQuery.getScript/

$(document).ready(function(){
 $.getScript("http://domain.com/ajax/test.js", function(data, textStatus, jqxhr) {
    console.log(data); //data returned
    console.log(textStatus); //success
    console.log(jqxhr.status); //200
    console.log('Load was performed.');
    //run your second script executable code here
 });
});

Upvotes: 0

Related Questions