Question

我正在使用PhantomJS捕捉仪表板的屏幕截图并将其另存为PNG文件。这很好用，但是当我添加一些额外的参数（line，dFrom，dTo）并希望在page.evaluateJavaScript()中使用它们时，它不起作用。有没有办法在JavaScript函数中使用PhantomJS变量？

var page = require('webpage').create(),
system = require('system'),
address, output, size, line, dFrom, dTo;

address = system.args[1];
output = system.args[2];
line = "All";
dFrom = null; 
dTo = null;

if (system.args.length > 2)
{
   line = system.args[3];
   dFrom = system.args[4];
   dTo = system.args[5];        
}

page.viewportSize = { width: 1200, height: 1800 };

page.open(address, function (status) {
    if (status !== 'success') {
        console.log('Unable to load the address!');
        phantom.exit();
    } else {
         page.evaluate(function () { 
             var body = document.body; 
             body.style.backgroundColor = '#fff'; 
             body.querySelector('div#nav-section').style.display = 'none'; 
             body.querySelector('div#to-hide-btns').style.display = 'none';
             body.querySelector('div#main-section').style.overflow = 'hidden'; 
        });
        page.evaluateJavaScript(function () {
            selectedLine = line;
            dateFrom = dFrom;
            dateTo = dTo; 
            onCriteriaChange();
        });
        window.setTimeout(function () {
            page.render(output, {format: 'png', quality: '100'});
            console.log('done');
            phantom.exit();
        }, 2000);
    }
})

如果我将其更改为此功能：

page.evaluateJavaScript(function () {
    selectedLine = "S01";
    dateFrom = "3/1/2015";
    dateTo = "3/10/2015"; 
    onCriteriaChange();
});

Answer 1

page.evaluate()及其兄弟姐妹是沙盒页面上下文的大门。传递给它的函数无法访问外部定义的变量。您需要将这些值显式传递到页面上下文中：

page.evaluate(function(line, dFrom, dTo) {
    selectedLine = line;
    dateFrom = dFrom;
    dateTo = dTo; 
    onCriteriaChange();
}, line, dFrom, dTo);

您也无法传递任意对象。它们需要可序列化：

注意： evaluate函数的参数和返回值必须是一个简单的原始对象。经验法则：如果它可以通过JSON序列化，那就没关系了。

闭包，函数，DOM节点等不起作用！

在page.evaluateJavaScript函数中使用PhantomJS变量

1 个答案: