How to load a remote js file?

Question

test.js file (ex : http://domain.com/test.js)

var myjs = function()
{
     this.getName = function(){
         return 'this is a name';
     }
}

casperjs run.js (windows 7)

var casper = require("casper").create({
    loadImages: false,
    logLevel:   "error", //debug
    verbose:    true
});

casper.then(function() { // <-- no more run() but then()
    phantom.injectJs('http://domain.com/test.js');
    var my_ = new myjs(casper);
        name = my_.getName();
        this.echo(name);
});

I know, phantom.injectJs does not support http://, but must be used through the website.

I do not know what to do.

Please make it clear. Do you want to inject the script into the page context (inside `casper.evaluate`) or do you want to use it in casper context (outside `casper.evaluate`)? If you don't know, what I mean, please read the [documentation](http://docs.casperjs.org/en/latest/modules/casper.html#evaluate) or my description [here](http://stackoverflow.com/a/24219029/1816580). — Artjom B., Jul 23 '14 at 16:11
I want to load website js function.. um.. like dynamic function? Read your link, but do not understand. use evaluate instead of injectJs? plz, sample code or Is there another way? — Kan, Jul 24 '14 at 02:31

Artjom B. · Accepted Answer · 2014-08-26T09:34:53.900

It's not entirely clear what you mean, because you (incorrectly) try to use injectJS which is for page context, but then pass a casper instance into myjs. So I provide 3 solutions.

Load into casper through require

If you want to load a remote file just as you would use require to load a local file into casper, then you should download it first:

var myjs;
casper.start(url)
casper.then(function(){
    this.download('http://domain.com/test.js', 'test.js');
    myjs = require('test'); // require the downloaded file
});
casper.then(function(){
    // do your thing
    var my_ = new myjs(casper);
    name = my_.getName();
    this.echo(name);
});

Doing that means that you have to export the function in the test.js file:

module.export = function(casper) {
    this.getName = function(){
        return 'this is a name';
    };
};

If the test.js is located on another domain, then you need to start casperjs with --web-security=false flag.

Load into casper through `eval`

If you don't want to change test.js into a module then you could sent an ajax request to get the script and simply eval it.

var globalmyjs;
casper.start(url)
casper.then(function(){
    var testJS = this.evaluate(function(){
        return __utils__.sendAJAX('http://domain.com/test.js', 'GET', null, false); // synchronous
    });
    eval(testJS);
    globalmyjs = myjs;
});
casper.then(function(){
    // do your thing
    var my_ = new globalmyjs(casper);
    name = my_.getName();
    this.echo(name);
});

If the test.js is located on another domain, then you need to start casperjs with --web-security=false flag.

Load into page context

Use this if myjs is to be executed in page context.

If you want to use the underlying phantomjs then it provides the includeJs(url, callback) function.

So you can use it like this:

var scriptLoaded = false;
casper.then(function() {
    phantom.includeJs('http://domain.com/test.js', function(){
        scriptLoaded = true;
    });
    casper.waitFor(function check() {
        return scriptLoaded;
    }, function then() {
        this.evaluate(function(){
            var my_ = new myjs(casper);
            name = my_.getName();
            console.log(name);
        });
    });
});

Though, you should use the casper.options.remoteScripts property.

So either inject the script on creation:

var casper = require("casper").create({
    remoteScripts: [ 'http://domain.com/test.js' ]
});

or before a page load:

casper.options.remoteScripts.push('http://domain.com/test.js');
casper.start(url);
// or
casper.thenOpen(url);

How to load a remote js file?

1 Answers1

Load into casper through require

Load into casper through eval

Load into page context

Load into casper through `eval`