实施例

Question

我想了解在哪种情况下我应该或必须使用evaluate函数。

我已阅读有关CasperJS evaluate函数的API文档，但我不确定在哪种情况下我应该使用此函数。 DOM上下文是什么意思？有人可以提供一个例子吗？

Answer 1

CasperJS文档很好地描述了casper.evaluate()的作用。

回顾：您传递将在DOM上下文中执行的函数（您也可以将其称为页面上下文）。您可以将一些原语作为参数传递给此函数并返回一个原语。请记住，传递给evaluate的此函数必须是自包含的。它不能使用在此函数之外定义的变量或函数。

CasperJS为日常任务提供了许多优秀的功能，但是当您需要自定义功能来执行某些操作时，您可能会遇到这种情况。 evaluate基本上可以做

从页面中检索一些值，以便在脚本中根据它执行操作
以点击或填写表单以外的其他方式操作页面
第1点和第2点的组合。

实施例

您可能需要通用函数才能从复选框中获取checked属性。 CasperJS目前仅提供getElementAttribute功能，在这种情况下不起作用。

function getChecked(cssSelector){
    return document.querySelector(cssSelector).checked;
}

if (casper.evaluate(getChecked, selector)){
    // do something
} else {
    // do something else
}

在大多数情况下，它只是您想要使用的偏好。如果您在每个data-uid元素上都有li的用户列表，那么您至少有2种可能性来检索uid。

卡斯帕只：

var uids = casper.getElementsAttribute('ul#user-list > li', 'data-uid');

卡斯帕 - 评估：

var uids = casper.evaluate(function(){
    return Array.prototype.map.call(document.querySelectorAll('ul#user-list > li'), function(li){ return li["data-uid"]});
});

关于操纵，一切皆有可能，但取决于你想做什么。假设您想要截取网页的截图，但有些元素您不希望出现在那里。或者您可以将自己的CSS添加到文档中。

删除元素：

function removeSelector(cssSelector){
    var elements = document.querySelectorAll(cssSelector);
    Array.prototype.forEach.call(elements, function(el){
        el.parent.removeChild(el);
    });
}
casper.evaluate(removeSelector, '.ad'); // if it would be that easy :)

通过CSS更改网站外观：

function applyCSS(yourCss){
    var style = document.createElement("style");
    style.innerHTML = yourCss;
    document.head.appendChild(style);
}
casper.evaluate(applyCSS, 'body { background-color: black; }'); // non-sense

罗茨

CasperJS建立在PhantomJS之上，因此继承了它的一些怪癖。 page.evaluate()的PhantomJS文档说明了这一点：

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

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

理解CasperJS中的evaluate函数

1 个答案:

实施例

罗茨