広告などの動的コンテンツが読み込まれた後、HTMLとWebサイトのスナップショットを取得しようとしています。
レンダリング機能を使用すると、ページにiframe内のコンテンツが表示されますが、コンテンツをファイルに保存すると、iframeが複製されたり、消えたりするなどの奇妙なことがあります。
したがって、完全なDOM(jsやiframeなどのすべての動的コンテンツが既にロードされている)を保存する方法があるかどうか疑問に思っています。
これが私のコードです:
var page = new WebPage(),
address, output, size;
if (phantom.args.length < 2 || phantom.args.length > 3) {
console.log('Usage: rasterize.js URL filename');
phantom.exit();
} else {
address = phantom.args[0];
output = phantom.args[1];
page.viewportSize = { width: 600, height: 600 };
page.open(address, function (status) {
if (status !== 'success') {
console.log('Unable to load the address!');
} else {
window.setInterval(function(){
page.render(output+'.png');
var fs = require('fs');
fs.write(output+'.html', page.content, 'w');
phantom.exit();
}, 4000);
}
});
}
これがサンプル画像出力です(iframeが赤で強調表示されています):
http://dl.dropbox.com/u/123181/prodigy.msn.com.png
HTML出力の例を次に示します。