javascript - 使用 Puppeteer 检索 JavaScript 渲染的 HTML

Question

我正在尝试从 this NCBI.gov page 中抓取 html .我需要包含#see-all URL 片段，这样我才能保证获得搜索页面，而不是从不正确的基因页面中检索 HTML https://www.ncbi.nlm.nih.gov/gene/119016 .

URL 片段不会传递到服务器，而是由页面客户端的 javascript 使用(在这种情况下)创建完全不同的 HTML，这是您在浏览器中访问页面时得到的和“查看页面源代码”，这是我要检索的 HTML。 R readLines() ignores url tags followed by #

我首先尝试使用 phantomJS，但它只是返回了此处描述的错误 ReferenceError: Can't find variable: Map ，这似乎是由于 phantomJS 不支持 NCBI 正在使用的某些功能，从而消除了这种解决方案。

我使用以下用 node.js 评估的 Javascript 在 Puppeteer 上取得了更大的成功:

const puppeteer = require('puppeteer');
(async() => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(
    'https://www.ncbi.nlm.nih.gov/gene/?term=AGAP8#see-all');
  var HTML = await page.content()
  const fs = require('fs');
  var ws = fs.createWriteStream(
    'TempInterfaceWithChrome.js'
  );
  ws.write(HTML);
  ws.end();
  var ws2 = fs.createWriteStream(
    'finishedFlag'
  );
  ws2.end();
  browser.close();
})();

然而，这返回了似乎是预渲染的 html。我如何(以编程方式)获取我在浏览器中获得的最终 html？

Answer 1

您可以尝试更改此设置:

await page.goto(
  'https://www.ncbi.nlm.nih.gov/gene/?term=AGAP8#see-all');

进入这个:

  await page.goto(
    'https://www.ncbi.nlm.nih.gov/gene/?term=AGAP8#see-all', {waitUntil: 'networkidle'});

或者，您可以创建一个函数 listenFor() 来监听页​​面加载时的自定义事件:

function listenFor(type) {
  return page.evaluateOnNewDocument(type => {
    document.addEventListener(type, e => {
      window.onCustomEvent({type, detail: e.detail});
    });
  }, type);
}`

await listenFor('custom-event-ready'); // Listen for "custom-event-ready" custom event on page load.

乐:

这也可能派上用场:

await page.waitForSelector('h3'); // replace h3 with your selector