Take the 2-minute tour ×

Say I have a file 'test.js' with the following contents:

var test = 'something';

Then I have a primary script that needs to load up test.js to grab the test variable.

Obviously this works:

$.ajax({dataType: "script", cache: true, url: 'test.js'});

The issue is that the variable test exists in the global scope. I'm curious if there's a way to add it into an object and keep it out of the global scope.

Something like:

function scriptloader() {
    this.grabscript = function() {

var myloader = new scriptloader();


Where ideally myloader would contain the loaded variable test. However, I can console.log(test) and still see 'something'.

Is there a way to lock the loaded script into scope or am I dreaming?

share|improve this question
Interesting question... the only way I could think of isolating the loaded file in it's own context would be to load the file via an iframe, then extract the object from the parent –  Justin Bicknell Jan 9 '13 at 23:51
That's actually an interesting idea... –  Fluidbyte Jan 9 '13 at 23:53
Couldn't one argue that if such a scenario is occuring then perhaps you should rethink your design approach as far as the placement of var test = 'something'; is concerned??? Seems like there is a better place for it than in your test.js script since it is needed elsewhere. –  Feisty Mango Jan 10 '13 at 0:10
Do you have control over test.js? –  Christophe Jan 10 '13 at 0:12
That's obviously a simple example. In reality it's loading in a script that acts as a model for a data set so my problem is I can't restructure it (i.e. contain it in an object). –  Fluidbyte Jan 10 '13 at 0:18
add comment

4 Answers

up vote 2 down vote accepted

You could try something like this:

function scriptloader() {
  this.grabscript = function() {
    var loader = this;
    $.ajax('test.js', {
      complete: function(response) {
        var js = '(function() {' + response.responseText + ' loader.test = test; })();'
      dataType: 'text'

The scriptloader instance would then get a property called test.

share|improve this answer
Except that as soon as you run $.ajax the script get loaded and the contents enter the global scope –  Fluidbyte Jan 10 '13 at 1:11
You mean because $.ajax is guessing that the response is JS, and automatically evaluating it? Yes, that's a good catch. I edited my response to include the 'type' option. This should prevent jQuery from evaluating the JS. As for where I call eval explicitly, it's wrapped in a closure, so no globals should be set. –  Jarrett Jan 10 '13 at 18:53
It needs to be dataType –  Fluidbyte Jan 10 '13 at 19:30
also response.data should be response.responseText. You can forgo the var js = ... and just eval the responseText –  Fluidbyte Jan 10 '13 at 19:38
Thanks again! Fixed. –  Jarrett Jan 10 '13 at 23:41
add comment

You could use eval for that purpose and create a variable with the expected name in the local scope:

(function(jsString) {
    var test;
    console.log(test); // 'something'
})("var test = 'something';");
console.log(test); // Exception: undefined variable

You then need to use that custom function instead of $.globalEval (code) as used in ajax for scripts.

Of course this is not a catch-all method for every global variable, for something like that you would need to create a separate global object (e.g. with an <iframe>) to evalute the script there.

However, using JSONP might be a better idea than using variables.

share|improve this answer
add comment

If you have no control over test.js, and must accept that test is declared as a global variable, a workaround would be to load test.js in an iframe within your page. This way test will be a global variable but only within the scope of the iframe window. From your main page, you'll be able to access it as ifr.contentWindow.test.

share|improve this answer
I just realized that this answer was already suggested by @Justin in the comments... –  Christophe Jan 10 '13 at 0:48
add comment

you could try to extend an object that already exists on your page.

Say you have a script on your page like this

var app = {
    ,loadPageScript : function(scriptUrl, cb) {
        $.getScript(scriptUrl, cb)
            .fail(function( jqxhr, settings, exception ) {

app.loadPageScript('/test.js', function(){

Your test.js file:

    app.loadedScripts.test = function() {

        app.someVar = 1;

        app.someFunction = function(){
share|improve this answer
add comment

Your Answer


