Nykyään yhä useampi web-sivusto on rakennettu siten, että sen varsinaista rakennetta ei saa näkyviin ilman JavaScriptiä. Esimerkiksi Twitter on täysin JavaScript-pohjainen ja se lataa sivujen sisällöt oman REST-rajapintansa kautta palvelimeltaan. Twitterin linkitkin ovat tätä muotoa:

http://twitter.com/#!/kennu/status/139455053852454914

Toisin sanoen URL osoittaa itse asiassa Twitterin etusivulle, ja linkin hash-osio vain kertoo JavaScript-sovellukselle, mitä sisältöä ruudulla näytetään.

Miten tällaisesta linkistä sitten saa ohjelmallisesti selville sen varsinaisen kiinnostavan sisällön, eli tweettauksen? Eräs tapa on käyttää PhantomJS:ää, joka osaa käsitellä HTML-sivuja virtuaalisessa DOM-muodossa. PhantomJS on helppo asentaa Mac OS X:ään Homebrew:n kautta:

$ brew install phantomjs

PhantomJS:ää käytetään kirjoittamalla pieni skripti, joka lataa halutun web-sivun ja käsittelee näin saatua DOM-rakennetta muistissa. Lopullisen DOM-rakenteen voi vaikka tulostaa HTML:ksi tällaisella skriptillä:

var page = new WebPage();
page.onConsoleMessage = function(msg) {
    console.log(msg);
};
page.open('http://twitter.com/#!/kennu/status/139455053852454914', function(status) {
    setTimeout(function() {
        page.evaluate(function() {
            console.log(document.body.parentNode.outerHTML);
        });
    }, 2000);
});

Tässä tapauksessa skripti lataa ensin Twitterin web-sivun ja odottelee sitten 2 sekuntia, että se ehtii suorittaa alustustoimenpiteet. Tämä tarkoittaa lähinnä varsinaisen tweetin lataamista REST APIn kautta ja renderöimistä osaksi DOM-puuta. Lopuksi skripti tulostaa koko sivun HTML:n sellaisena kuin selaimet sisäisesti näkevät sen. Sieltä sitten löytyy esimerkiksi tämä div-elementti:

<div class="tweet-text tweet-text-large">Starting to get annoyed by open source projects that don't use Git, I don't want to install hg/svn/bzr/whatever everywhere any more.</div>

Tulevaisuudessa yhä useammat hakukoneet ja muut työkalut, joiden tarvitsee ladata HTML-sivuja netistä, joutunevat käyttämään tätä tai vastaavaa mekanismia saadakseen sivuista irti niiden varsinaisen sisällön.

Published 24.11.2011