javascript - 点击后如何获取更新的内容？

Question

我正在努力为这个问题找到解决方案。

1. 打开一个页面并获取特定链接
2. 点击一个链接（分页链接）获取第二页结果
3. 阅读新内容并再次获取新链接....

这是我的 casperjs 应用程序的一部分：

var page = 1;

function getLinks() {    
    var links = __utils__.getElementsByXPath('//div[@class="myDiv"]//a');

    return Array.prototype.map.call(links, function(e) {
        return e.getAttribute('href')
    });
}

casper.start("www.example.com", function(){
   //
})

casper.repeat(2, function() {

    this.then(function(){
        links = this.evaluate(getLinks);
        links = links.concat(links);    
    });

    this.then(function(){
        page++;    
        this.clickLabel(String(page), 'a');
    });

});

正如你所看到的，我在重复里面有两个步骤。我设置了 2，因为我只需要检查两页。

目前我的问题是“点击”。它可以工作，因为调用了新的 Url，但问题是第一步将立即执行，因此新内容没有完全加载。因此，当我再次调用 getLinks() 时，我仍在处理以前的内容。

我显然想在页面完全加载时获取链接。我该怎么做 ？

谢谢！

Answer 1

您可以wait在检索链接之前添加 a ，如下所示：

casper.repeat(2, function() {
    this.wait(2000); // 2 seconds

    this.then(function(){
        links = this.evaluate(getLinks);
        links = links.concat(links);    
    });

    this.then(function(){
        page++;
        this.clickLabel(String(page), 'a');
    });

});

您还可以在单​​击后附加 awaitForResource以确保页面已加载。我在这里假设页码在 URL 内page=x：

casper.repeat(2, function() {
    this.then(function(){
        links = this.evaluate(getLinks);
        links = links.concat(links);    
    });

    this.then(function(){
        page++;
        this.clickLabel(String(page), 'a');
    });

    this.waitForResource(new RegExp("page="+page));
});

Answer 2

常见问题解答 如何延迟某些代码，以便它让虚拟浏览器有时间加载和/或呈现页面上的点击或其他 JavaScript 操作的结果？

window.setTimeout(
    function () {
        // process page here
    },
    2000 // number of milliseconds to wait (here 2s)
);

很简单，不是吗！在你的情况下，你会：

do_click();
window.setTimeout(
    function () { process_click_result(); },
    2000 // 2 seconds
);