PhantomJS : 在渲染页面之前修改 dom

Question

我正在使用 PhantomJS 2.1.1 能够抓取网页并生成屏幕截图。

它正在工作...但是我想在将页面渲染为 png 之前进行一些 DOM 操作（在 javascript 中）。

我正在做的是（总结几步）：

page.open(http://my_url.htm), function(status) {
  if (status === 'sucess') {
    waitFor(isPageLoaded, grabPage, 30000); //waitFor function is one provided by PhantomJS in example
  }
};

function grabPage() {
  page.render('screenshot_raw.png'); //this is working well

  page.evaluate(function() {
    document.querySelector('[id^="boardBackgroundImg-"]').style.filter = 'invert(1)';
  }

  page.render('screenshot_remodel.png'); //same screenshot as before

  phantom.exit();   
}

在 firefox consol 中做自己时，:

document.querySelector('[id^="boardBackgroundImg-"]').style.filter = 'invert(1)';

一切正常！

但是进入我的 phantomjs 脚本...它什么也没做（但没有错误）。我试图将它放在外部 js 文件中并使用 injectJS() 或 includeJS() 但它没有更多帮助。

有人有想法吗？

显然我想再做一些 DOM 转换（删除一些节点）。

此致。

更新

我已经更新了我的代码以在最后做：

fs.write("test.htm", page.content, 'w');
phantom.exit()

文件内容不包含我提供的 DOM 更改。所以似乎 page.evaluate(...) 是只读的。只是为了从页面内容中获取数据。

有没有办法在 PhantomJS 渲染页面之前修改 DOM？

此致

Answer 1

PhantomJS v2.1.1 的 Webkit 渲染引擎现在比较老，它不完全支持现代 CSS 或 Javascript。如果可以，请尝试使用 puppeteer。

PhantomJS : 在渲染页面之前修改 dom

PhantomJS : Modifiy dom before rendering page

dom

phantomjs