将参数传递给page.includeJs()和page.evaluate()中的匿名函数

时间:2012-08-31 21:45:43

标签: javascript phantomjs

一点背景......我对javascript和phantom.js有点新,所以我不知道这是一个javascript还是phantom.js bug(功能?)。

以下成功完成(对于缺少的phantom.exit(),您只需要在完成后按ctrl + c):

var page = require('webpage').create();
var comment = "Hello World";

page.viewportSize = { width: 800, height: 600 };
page.open("http://www.google.com", function (status) { 
    if (status !== 'success') {
        console.log('Unable to load the address!');
        phantom.exit();
    } else {
        page.includeJs('http://code.jquery.com/jquery-latest.min.js', function() {
            console.log("1: ", comment);
        }, comment);

        var foo = page.evaluate(function() {            
            return arguments[0];
        }, comment);

        console.log("2: ", foo);            
    }
});

这有效:

page.includeJs('http://code.jquery.com/jquery-latest.min.js', function() {
    console.log("1: ", comment);
}, comment);

输出1: Hello World

但不是:

page.includeJs('http://code.jquery.com/jquery-latest.min.js', function(c) {
    console.log("1: ", c);
}, comment);

输出1: http://code.jquery.com/jquery-latest.min.js

而不是:

page.includeJs('http://code.jquery.com/jquery-latest.min.js', function() {
    console.log("1: ", arguments[0]);
}, comment);

输出1: http://code.jquery.com/jquery-latest.min.js

观看第二部分,这有效:

var foo = page.evaluate(function() {            
    return arguments[0];
}, comment);

console.log("2: ", foo);

输出2: Hello World

而且:

var foo = page.evaluate(function(c) {           
    return c;
}, comment);

console.log("2: ", foo);

输出2: Hello World

但不是这样:

var foo = page.evaluate(function() {            
    return comment;
}, comment);

console.log("2: ", foo);

输出

  

ReferenceError:找不到变量:comment

     

phantomjs://webpage.evaluate():2

     

phantomjs://webpage.evaluate():3

     

phantomjs://webpage.evaluate():3

     

2:null

好消息是,我知道哪些有效,哪些无效,但有点保持一致性?

为什么includeJsevaluate之间存在差异?

将参数传递给匿名函数的正确方法是什么?

1 个答案:

答案 0 :(得分:44)

使用PhantomJS理解棘手的事情是有两个执行上下文 - 幻影上下文,它是您的机器本地的,可以访问phantom对象和require d模块,以及远程上下文,它存在于无头浏览器的window内,只能访问您通过page.load加载的网页中加载的内容。

您编写的大部分脚本都是在Phantom上下文中执行的。主要的例外是page.evaluate(function() { ... })内的任何内容。此处的...在远程上下文中执行,该上下文是沙箱,无需访问本地上下文中的变量和对象。您可以通过以下方式在两个上下文之间移动数据:

  • 从传递给page.evaluate()
  • 的函数中返回一个值
  • 将参数传递给该函数。

这样传递的值基本上是在每个方向上序列化的 - 你不能用方法传递一个复杂的对象,只能传递像字符串或数组这样的数据对象(我不知道确切的实现,但经验法则似乎可以通过任何方向传递任何可以使用JSON序列化的东西。您可以 访问page.evaluate()函数之外的变量,就像使用标准Javascript一样,只能访问作为参数明确传入的变量。

那么,你的问题:为什么includeJs和评估之间存在差异?

  • .includeJs(url, callback)采用在 Phantom 上下文中执行的回调函数,显然是接收url作为其第一个参数。除了它的参数之外,它还可以访问其封闭范围内的所有变量(就像任何普通的JavaScript函数一样),包括示例中的comment。它在回调函数之后获取额外的参数列表 - 当你在回调中引用comment时,你引用的是外部变量,而不是函数参数。

    var foo = "stuff";
    page.includeJs('http://code.jquery.com/jquery-latest.min.js', function() {
        // this callback function executes in the Phantom context
        console.log("jQuery is loaded in the remote context.");
        // it has access to outer-scope variables, including "phantom"
        nowDoMoreStuff(foo, page);
    });
    
  • .evaluate(function, args*)接受一个函数来执行,并传递零个或多个参数(以某种序列化形式)。您需要在函数签名中命名参数,例如function(a,b,c),或使用arguments对象访问它们 - 它们不会自动与您传入的变量具有相同的名称。

    var foo = "stuff";
    var bar = "stuff for the remote page";
    
    var result = page.evaluate(function(bar2) {
        // this function executes in the remote context
        // it has access to the DOM, remote libraries, and args you pass in
        $('title').html(bar2);
        // but not to outer-scope vars
        return typeof foo + " " + typeof bar;
    }, bar);
    
    console.log(result); // "undefined undefined"
    

因此,传递参数的正确方法对于这些不同方法中的函数是不同的。对于injectJs,将使用一组新参数(至少包括URL)调用回调,因此您要访问的任何变量都需要位于回调的封闭范围内(即您可以访问它们)在函数的闭包中)。对于evaluate,只有一种传递参数的方法,即将它们包含在传递给evaluate本身的参数中(还有其他方法,但它们很棘手,不值得讨论)现在这个功能在PhantomJS中可用了。)