javascript - 使用 CasperJS 计算 iFrame 中的每个元素

Question

我正在寻找一种方法来计算 div 中的每个元素。问题是，div 在 iF​​rame 中。

casper.then(function() {
        this.echo(this.evaluate(function() {
             __utils__.getElementByXPath('//*[@id="main-frame"]', __utils__.findAll('#design-scrollbox-0')).length;
        }));
    });

上面我想做的是:

• 使用 XPath 获取 iFrame
• 收集每一个元素
• 最后得到返回数组的长度。

如果您能为我指明正确的方向，我将不胜感激。遗憾的是，我不能使用 jQuery 版本 > 1.7，所以 jQuery.contents 不是一个选项。

Answer 1

您可以注入(inject)其他一些 jQuery 版本，但您不需要它，因为 CasperJS 提供了一种方便的方法来更改 iframe 并在其上下文中执行操作。 casper.withFrame是 PhantomJS 函数 page.switchToChildFrame 和 page.switchToParentFrame 的快捷方式。它从回调中创建一个新步骤，可以在其中嵌套更多步骤。

当然有不同的类型来计算元素，但可能最简单的是使用

casper.getElementsInfo(selector).length

这是打印我用于概念验证的链接数的函数:

function printLinks(){
    try{
        this.echo("elements: " + this.getElementsInfo("a").length);
    } catch(e) {
        this.echo("CAUGHT: " + e);
    }
}

i框架的概念验证:

casper.start("http://jsfiddle.net/anjw2gnr/1/")
    .then(printLinks)
    .withFrame(0, printLinks)
    //.withFrame(1, printLinks)
    .then(function() {
        console.log('Done', this.getCurrentUrl());
    })
    .run();

打印

elements: 33elements: 2

Proof-of-concept for frames:

casper.start("https://docs.oracle.com/javase/7/docs/api/index.html")
    .then(printLinks)
    .withFrame(0, printLinks)
    .withFrame(1, printLinks)
    .then(function() {
        console.log('Done', this.getCurrentUrl());
    })
    .run();

打印

CAUGHT: CasperError: Cannot get information from a: no elements found.elements: 210elements: 4024

So, if you want to count elements, but don't want to use a try-catch block, this is better:

casper.exists(selector) ? casper.getElementsInfo(selector).length : 0