Pass arguments with page.evaluate

Question

I'm using PhantomJS page.evaluate() to do some scraping. My problem is that the code I pass to the webkit page is sandboxed, and so has no access to the variables of my main phantom script. This makes it hard make the scraping code generic.

page.open(url, function() {
  var foo = 42;

  page.evaluate(function() {
    // this code has no access to foo
    console.log(foo);
  });
}

How could I push arguments into the page?

Answer 1

I've had that exact problem. It can be done with a little trickery, because page.evaluate also can accept a string.

There are several ways to do it, but I use a wrapper called evaluate, which accepts additional parameters to pass to the function that must be evaluated on the webkit side. You would use it like this:

page.open(url, function() {
  var foo = 42;

  evaluate(page, function(foo) {
    // this code has now has access to foo
    console.log(foo);
  }, foo);
});

And here is the evaluate() function:

/*
 * This function wraps WebPage.evaluate, and offers the possibility to pass
 * parameters into the webpage function. The PhantomJS issue is here:
 * 
 *   http://code.google.com/p/phantomjs/issues/detail?id=132
 * 
 * This is from comment #43.
 */
function evaluate(page, func) {
    var args = [].slice.call(arguments, 2);
    var fn = "function() { return (" + func.toString() + ").apply(this, " + JSON.stringify(args) + ");}";
    return page.evaluate(fn);
}

Answer 2

While you can pass arguments into evaluate(function, arg1, arg2, ...), this is often a little cumbersome. Especially in cases when passing in several variables, or worse, functions.

To get around this obstacle, one can use injectJs(filename) instead.

page.open(url, function() {
    if ( webpage.injectJs('my_extra_functionality.js') ) {
        page.evaluate( function() {
            // this code has access to foo and also myFunction();
            console.log(foo);
            console.log(myFunction());
        });
    }
    else {
        console.log("Failed to inject JS");
    }
}

---

Where my_extra_functionality.js is a local file in the same directory:

var foo = 42;
var myFunction = function(){
    return "Hello world!";
}

Answer 3

There is the solution that works with PhantomJS 0.9.2 and 0.2.0:

page.evaluate(
    function (aa, bb) { document.title = aa + "/" + bb;}, //the function
    function (result) {}, // a callback when it's done
    "aaa", //attr 1
    "bbb"); //attr 2

Answer 4

You can pass in the arguments to the function as arguments to page.evaluate.

Example:

page.evaluate(function(arg1, arg2){
    console.log(arg1); //Will print "hi"
    console.log(arg2); //Will print "there"
}, "hi", "there");

Answer 5

This works for me:

page.evaluate("function() {document.body.innerHTML = '" + size + uid + "'}");

Means to put everything as a string. Anyway later it become a string. Check the library source.

Answer 6

Another possibility: pass the variables in with the url. For example, to pass object x

// turn your object "x" into a JSON string
var x_json = JSON.stringify(x);

// add to existing url
// you might want to check for existing "?" and add with "&"
url += '?' + encodeURIComponent(x_json);

page.open(url, function(status){
    page.evaluate(function(){
        // retrieve your var from document URL - if added with "&" this needs to change
        var x_json = decodeURIComponent(window.location.search.substring(1));
        // evil or not - eval is handy here
        var x = eval('(' + x_json + ')');       
    )}
});