javascript - querySelectorAll 无法识别 var

Question

我正在使用 casperjs 进行一些网络抓取，但遇到了一个奇怪的问题。我希望能够从字符串构造 CSS 路径并使用“querySelectorAll”获取数组，如下所示:

var tier = '-ou-';
var index = 'div.list > div > a[href*="' + tier + '"]';
var battles = document.querySelectorAll(index);

但是，这不起作用，battles 返回 null。

此版本有效:

var links = document.querySelectorAll('div.list > div > a[href*="-ou-"]');

但没有其他人这样做。我也尝试过:

var index = 'div.list > div > a[href*="-ou-"]';
var battles = document.querySelectorAll(String(index));

和

var index = 'div.list > div > a[href*="-ou-"]';
var battles = document.querySelector(index);

以及上述所有组合，只是作为健全性检查，但没有一个起作用。我对 javascript 比较陌生，所以我觉得我可能遗漏了一些明显的东西，但我不知道是什么。

编辑:我的整个程序如下。照原样，它工作得很好。如果使用 getBattles 中的注释行而不是下面的行，则它不再起作用(var 'battles' 变为 null)

var casper = require('casper').create();
var url = 'http://play.pokemonshowdown.com/';
var battles = [];
var tier = '-ou-';
var index = "div.list > div > a[href*=\"" + tier + "\"]";

function getBattles() {
    //var battles = document.querySelectorAll(index);
    var battles = document.querySelectorAll('div.list > div > a[href*="-ou-"]');
    return Array.prototype.map.call(battles, function(e) {
        return e.getAttribute('href');
    });
}

casper
  .start(url)
  .then(function() {
    if(this.exists('div.leftmenu')) {
      this.echo('something works');
    }
    else {
      this.echo('nothing works');
    }
  })
  .thenClick('button[name="roomlist"]')
  .then(function(){
    this.echo("This one is done.");
  })
  .waitForSelector('div.list > div > a', function(){
    battles = this.evaluate(getBattles);
    this.echo(this.getHTML('div.list > div:nth-child(2) > a'));
  })
  .then(function(){
    this.echo("This two is done.");
  });

casper.run(function() {

    this.echo(battles.length + ' battles found:');
    this.echo(' - ' + battles.join('\n - ')).exit();
});

Answer 1

CasperJS 和 PhantomJS 有两个上下文。通过 casper.evaluate() 编程的内部上下文是沙盒的。这意味着它无法访问外部定义的变量。您需要显式传递这些变量:

var index = 'div.list > div > a[href*="' + tier + '"]';

function getBattles(innerIndex) {
    var battles = document.querySelectorAll(innerIndex);
    return Array.prototype.map.call(battles, function(e) {
        return e.getAttribute('href');
    });
}
...
battles = casper.evaluate(getBattles, index);

evaluate() 的 PhantomJS 文档有一个重要的说明:

Note: The arguments and the return value to the evaluate function must be a simple primitive object. The rule of thumb: if it can be serialized via JSON, then it is fine.

Closures, functions, DOM nodes, etc. will not work!