PhantomJS を使用して、任意の URL からスクリーンショットを作成しています。スクリーンショットを撮る前に、ページ DOM を操作してすべてのドロップダウン メニューを削除します。PhantomJS がページの左上隅にドロップダウン メニューを正しくレンダリングしないためです (Phantom の既知の問題)。
これを行うための簡単な DOM スクリプトがあります。
var selects = document.getElementsByTagName('select');
for (var i=0; i < selects.length; i++) {
document.getElementsByTagName('select')[i].style.visibility="hidden";
}
これはテスト済みで、スタンドアロンの Javascript として正常に動作します。ただし、スクリーンショットを収集するために使用している PhantomJS コード内では機能しません (最後の部分を示します)。
page.open(address, function (status) {
if (status !== 'success') {
console.log('Unable to load the address!');
} else {
window.setTimeout(function () {
var selects = document.getElementsByTagName('select');
for (var i=0; i < selects.length; i++) {
document.getElementsByTagName('select')[i].style.visibility="hidden";
}
page.render(output);
phantom.exit();
}, 200);
}
});
一部のページでは、選択ボックスが間違った場所にレンダリングされています。オリジナルの PhantomJS レンダリング バグを解決するか、DOM でドロップダウン メニューを非表示にする方法を教えていただければ幸いです。ありがとう。