从官方Playstation网站抓取奖杯数据

Question

我试图使用PhantomJS从http://my.playstation.com/logged-in/trophies/public-trophies/中抓取奖杯数据

该页面要求您输入一个有效的用户名，然后单击“go”，页面将加载数据。我已经让这个有点工作，但它从来没有载入战利品数据到div。我希望我错过了与ajax相关的东西，这是造成这一切的原因？

  var fullpagehtml = page.evaluate(function() 
  {
        document.getElementById("trophiesId").value = "<<valid user id>>";
        //checkPTrophies(); btn click calls this function
        $('#btn_publictrophy').click().delay( 6000 );

        console.log("\nWaiting for trophy list to load...");
        var trophylist = document.getElementById("trophyTrophyList").innerHtml; // all the data i want ends up inside this div
        var counter = 0; //delay andset timeout wont work here so this is the best i coukld think of
        while (trophylist == null)
        {
            //presumably the ajax query should kick in on the page and populate this div, but it doesnt.
            trophylist = document.getElementById("trophyTrophyList").innerHtml;
            counter ++;
            if(counter == 1000000)
            {
                console.log($('#trophyTrophyList').html());
                counter = 0;
            }
        }
        return document.all[0].outerHTML;

  });

Answer 1

delay( 6000 )绝对不会像文档所说的那样做任何事情：

.delay()方法是延迟排队jQuery效果的最佳方法。因为它是有限的--例如，它没有提供一种取消延迟的方法--.delay()并不是JavaScript原生setTimeout函数的替代品，这可能更适合于某些用例。

要等待，您必须在页面上下文之外执行此操作(繁忙等待在JavaScript中不起作用，因为它是单线程的)：

page.evaluate(function() {
    document.getElementById("trophiesId").value = "<<valid user id>>";
    //checkPTrophies(); btn click calls this function
    $('#btn_publictrophy').click();
});

console.log("\nWaiting for trophy list to load...");
setTimeout(function(){
    var fullpagehtml = page.evaluate(function() {
        var trophylist = document.getElementById("trophyTrophyList").innerHTML;
        return trophylist;
    });
}, 20000);

您还可以使用waitFor来等待，直到填充了#trophyTrophyList而不是使用setTimeout。

waitFor(function(){
    return page.evaluate(function(){
        var e = document.getElementById("trophyTrophyList");
        return e && e.innerHTML;
    });
}, function(){
    // TODO: get trophies
});

这不会对您有太大帮助，因为仅仅因为加载了#trophyTrophyList，并不意味着子类元素已经在DOM中了。您必须找到一些选择器，它表示页面已被充分加载，例如，等待直到页面中存在.trophy-image。对于我来说，waitFor函数的超时时间是20秒。

waitFor(function(){
    return page.evaluate(function(){
        var e = document.querySelector("#trophyTrophyList .trophy-image");
        return e;
    });
}, function(){
    setTimeout(function(){
        var trophiesDiv = page.evaluate(function(){
            return document.getElementById("trophyTrophyList").innerHTML;
        });
        console.log(trophiesDiv);
    }, 1000); // wait a little longer
}, 20000);

不要忘记，您需要page.evaluate来实际访问DOM。顺便说一下，这是innerHTML而不是innerHtml。