Question

我正在使用PhantomJS从任意网址创建屏幕截图。在截屏之前，我想操纵页面DOM以删除所有下拉菜单，因为PhantomJS在页面的左上角错误地渲染它们（一个已知的幻影issue。）

我有一个简单的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中的下拉菜单。感谢。

Answer 1

在正确的上下文中运行它，即在page.evaluate的页面内运行它。有很多examples included with PhantomJS证明了这一点，例如useragent.js

Answer 2

此代码不起作用？我在for循环中使用了缓存的选择变量，而不是从DOM中重新选择元素以提高性能。

var selects = document.getElementsByTagName('select'); 
for (var i=0; i < selects.length; i++) { 
   selects[i].style.visibility="hidden"; 
}

使用PhantomJS进行DOM操作

2 个答案: