Global variable not accessible inside page.open() - PhantomJS

Question

I am new to PhantomJS and JS in general and am unable to understand why querySelector is unable to access my element global variable. I have tried to pass element within the various function()to no avail. I have included below an un-molested copy of the code.

var page = require('webpage').create();
var args = require('system').args;

var uri = args[1];
var element  = args[2];

console.log('Arg 1: '+args[1]);
console.log('Arg 2: '+args[2]);

page.open(uri, function (status) {
    if (status !== 'success') {
        console.log('Error Opening Page');
    } else {
        window.setTimeout(function () {
            var bounds = page.evaluate(function () { 

        canvas = document.querySelector('#'+ element);

        return canvas.getBoundingClientRect(); 
            });

            page.clipRect = {
                top:    bounds.top,
                left:   bounds.left,
                width:  bounds.width,
                height: bounds.height
            };

            page.render('result.png');
            phantom.exit();
        }, 500);
    }
});

Results in

$ ./phantomjs test.js http://fabricjs.com/static_canvas c
Arg 1: http://fabricjs.com/static_canvas
Arg 2: c
ReferenceError: Can't find variable: args

  undefined:3
  :6
TypeError: null is not an object (evaluating 'bounds.top')

  phantomjs://code/test.js:23

score 4 · Accepted Answer · answered May 15 '16 at 18:12

4

You can pass it by parameter (element)

var bounds = page.evaluate(function (element) { 
    canvas = document.querySelector('#'+ element);
    return canvas.getBoundingClientRect(); 
}, element);

answered May 15 '16 at 18:12

Emilio Platzer

2,327
21
29

jeremy-denis · Answer 2 · 2016-05-15T18:10:15.237

1

Yes it's because when you perform a page.open your are on another page and the variable from the previous one are not shared with the second.

What you will need to solve your issue it's reassign the args variable in the new page.

But not in your case but if the variable you need to share is a value you can try passing this value in the URL to recover it in the new page.

edited May 15 '16 at 18:10

answered May 15 '16 at 18:07

jeremy-denis

6,368
3
18
35

You can also pass a value along with the URL used to open the page. – Anthony E May 15 '16 at 18:08
yes you are right if the parameter is value we can passed it in the URL – jeremy-denis May 15 '16 at 18:09
@jeremy-denis I'm not sure I understand. I just tried to reassign args within page.open and that did not fix the problem. I have also tried passing element within function() and that did not solve the problem either. – FantasticSponge May 15 '16 at 18:13
can you check that require('system').args return something in your page ? – jeremy-denis May 15 '16 at 18:15
args is actually visible within the scope of page.open(), just not within the evaluation of the page. Emilio's solution worked. – FantasticSponge May 15 '16 at 18:17
ok great if you get the solution – jeremy-denis May 15 '16 at 18:18

Global variable not accessible inside page.open() - PhantomJS

2 Answers2