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

Question

一点背景...我对 javascript 和 phantom.js 有点陌生，所以我不知道这是 javascript 还是 phantom.js 错误（功能？）。

以下成功完成（抱歉缺少 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：找不到变量：注释

phantomjs://webpage.evaluate():2

phantomjs://webpage.evaluate():3

phantomjs://webpage.evaluate():3

2：空

好消息是，我知道什么有效，什么无效，但是保持一点一致性怎么样？

includeJs为什么和有区别evaluate？

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

score 44 · Accepted Answer

使用 PhantomJS 需要理解的一个棘手的问题是，有两个执行上下文 - Phantom 上下文，它位于您的机器本地并且可以访问phantomobject 和required 模块，以及远程上下文，它存在于window无头浏览器中，并且只有可以访问您通过加载的网页中加载的内容page.load。

您编写的大部分脚本都是在 Phantom 上下文中执行的。主要的例外是page.evaluate(function() { ... }). 这里...是在远程上下文中执行的，它是沙盒的，无法访问本地上下文中的变量和对象。您可以通过以下方式在两个上下文之间移动数据：

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

这样传递的值基本上在每个方向上都被序列化了——你不能传递一个带有方法的复杂对象，只能传递一个像字符串或数组这样的数据对象（我不知道确切的实现，但经验法则似乎是你可以用 JSON 序列化的任何东西都可以在任一方向传递）。您不能像使用标准 Javascript 那样访问page.evaluate()函数外部的变量，只能访问作为参数显式传入的变量。

所以，你的问题：为什么 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 本身中可用） .

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

1 回答 1

Related

Reference