HTTP(S)によりWebサーバとデータを送受信するには、 xhr API で XMLHttpRequest のインスタンスを生成する方法や、 Jetpack SDK 0.5 で追加された Request API を使用する方法があります。しかし、これらのAPIではWebサーバからのレスポンスがHTMLデータだった場合、特定のノードにある文字列を抽出したりする処理がやや困難となります。

一方、 Jetpack SDK 0.4 で追加された Page Worker API を用いると、不可視のフレーム（iframe 要素）内に指定したURLのHTMLドキュメントをロードし、パースされた結果をDOM操作することが可能となります。この記事では、 Page Worker API を用いて Wikipedia の Internet に関するページを不可視のフレームに読み込んで見出し（H2 > SPAN要素）を列挙する例を紹介します。

基本的な使い方

まず、 require 関数でモジュールをインポートします。

var pageWorker = require("page-worker");

Page Worker APIの Page コンストラクタを用いて、 Page オブジェクトのインスタンスを生成します。コンストラクタの引数には、以下のプロパティを有するオブジェクトを渡します。

生成した Page インスタンスを add メソッドへ渡すと、不可視のフレーム内への読み込みが開始されます。

var page = pageWorker.Page({
    content: "http://en.wikipedia.org/wiki/Internet",
    onReady: function() {
        // ToDo
    }
});
pageWorker.add(page);

不可視のフレームへの読み込みが完了すると、 Page インスタンスの window および document プロパティ経由で不可視のフレーム内のDOMへアクセスすることができるようになります。以下の例では、不可視のフレームへの読み込み完了時、 HTMLのURLおよびタイトルを取得してコンソールへ表示し、さらにH2要素直下にあるSPAN要素の中身の文字列を列挙して表示します。

    onReady: function() {
        var url = this.window.location.href;
        var title = this.document.title;
        console.log(url + "
" + title);
        var elts = this.document.querySelectorAll("h2 > span");
        Array.forEach(elts, function(elt) {
            console.log(elt.textContent);
        });
        pageWorker.remove(this);
    }

なお、 onReady の最後で Page オブジェクトのインスタンス自身を PageWorker の remove メソッドへ渡すことで、 window および document プロパティが削除され、不可視のフレーム内でのページ読み込みに使用されたメモリが解放されます。