Question

我正在使用CasperJS从HTML数据中提取一些内容。为此，我在evaluate()函数中添加了一些jQuery代码，但jQuery代码在那里不起作用。我不知道如何正确使用它。

我正在使用以下代码，示例：

var resultObj  =  [];

var casper = require('casper').create({
    pageSettings: {
       loadImages: false,
       loadPlugins: false,
       userAgent: 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1588.0 Safari/537.36'
    },
});

casper.start();

//another codes

casper.traverseHtml =   function(){
    var executer    =   casper.evaluate(function(){
        var htmlText    =   '<div><div class="tp">x</div><div class="tp">y</div><div class="tp">z</div><div class="tp">p</div></div>';
        object = $('<div/>').html(htmlText).contents();         
        object.find('.tp').each(function(index, element) {
            resultObj.push({value:index});
        });  
        return resultObj;

    });
    resultObj   =   executer;
}
casper.then(function() {
    casper.traverseHtml();
});

//codes

casper.run(function() {
    this.echo(JSON.stringify(resultObj)).exit();
});

我得到了此代码的null结果，但当我将traverseHtml函数替换为

时

casper.traverseHtml =   function(){
    var executer    =   casper.evaluate(function(){            
        return [{value:"1234"}];
    });
    resultObj   =   executer;
}

然后它将输出as，

[{"value":"1234"}]

我不知道如何纠正这个问题。

Answer 1

首先尝试将jQuery变量传递给evaluate函数 - 可能是一个快速修复：

var executer    =   casper.evaluate(function($){

其次，验证远程页面是否有jQuery并检查版本。如果jQuery不存在，请注入（找到文档here）：

var casper = require('casper').create({
    clientScripts: ["includes/jquery.min.js"]
});

如果使用旧版本的jQuery，您可能需要在函数体中用'jQuery'替换'$'。试试这个：

var executer    =   casper.evaluate(function($){
    var htmlText    =   '<div><div class="tp">x</div><div class="tp">y</div><div class="tp">z</div><div class="tp">p</div></div>';
    object = jQuery('<div/>').html(htmlText).contents();         
    object.find('.tp').each(function(index, element) {
        resultObj.push({value:index});
    });  
    return resultObj;
});

如果这些选项不起作用，请打开Google Chrome浏览器并在网页的控制台中测试您的jQuery代码。

Answer 2

PhantomJS有两个上下文，因为CasperJS是在PhantomJS之上构建的，所以它有两个相同的上下文。您可以通过casper.evaluate()访问页面/ DOM上下文，但它是沙箱。这意味着您无法访问在casper.evaluate()的回调函数之外定义的任何变量。您要在其中使用的所有内容都必须明确传入。有关详细信息，请参阅PhantomJS documentation。

问题是您没有在页面上下文中定义resultObj，因此您无法push undefined引用任何内容。

var executer = casper.evaluate(function(){
    var resultObj = []; // only additional line

    var htmlText = '<div><div class="tp">x</div><div class="tp">y</div><div class="tp">z</div><div class="tp">p</div></div>';
    var obj = $('<div/>').html(htmlText).contents();         
    obj.find('.tp').each(function(index, element) {
        resultObj.push({value:index});
    });  
    return resultObj;
});

我还将object更改为本地变量obj。

如果页面没有提供jQuery，您需要自己包含它：

var casper = require('casper').create({
    clientScripts: ["jquery.min.js"]
});

如果您将jquery.min.js放在运行目录中。

如果您想查看页面上下文中隐藏的实际错误，您可以收听"page.error" event：

casper.on("page.error", function(msg, trace) {
    this.echo("Error: " + msg, "ERROR");
});

还有更多有趣的事件：Example。

jQuery没有在CasperJS的evaluate（）函数中做任何事情

2 个答案: