querySelectorAll无法识别var [英] querySelectorAll not recognizing var

问题描述

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

I am using casperjs for some webscraping and am having a strange problem. I want to be able to construct a CSS path from strings and get an array using 'querySelectorAll' like below:

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

但是，这不起作用，并且战斗返回null。

However, this does not work, and battles returns null.

此版本有效：

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

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

But none other does. I also tried:

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相对较新，所以我觉得我可能会遗漏一些明显的东西，但我不知道是什么。

and all combinations of the above, just as a sanity check, and none worked. I am relatively new to javascript so I feel I may be missing something obvious, but I have no idea what.

编辑：
我的整个程序如下。它是正常的。如果使用getBattles中的注释行而不是它下面的注释行，则它不再有效（var'battles'变为null）

My entire program is below. As is, it works fine. If the commented line in getBattles is used instead of the one below it, it no longer works (var 'battles' becomes 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();
});

推荐答案

CasperJS和PhantomJS有两个上下文。内部上下文通过 casper.evaluate（ ） 是沙箱。这意味着它无法访问外部定义的变量。您需要明确地传递这些变量：

CasperJS and PhantomJS have two contexts. The inner context which is programmed through casper.evaluate() is sandboxed. It means that it has no access to variables defined outside. You need to explicitly pass those variables in:

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（） 有一个重要的注释：

The PhantomJS documentation of evaluate() has an important note:

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

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.

闭包，函数，DOM节点等将 not 工作！

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

这篇关于querySelectorAll无法识别var的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！