如何配置Puppeteer以正确渲染外部JS页面？仅适用于Localhost URL

Question

我正在尝试为外部Javascript页面配置服务器端呈现。我正在使用Puppeteer这个目的，当我提供任何外部URL（不是localhost页面）时，Puppeteer只获取URL的源代码（你可以在所请求页面的view-source模式中看到），而不渲染整个DOM 。当我尝试SSR任何localhost Javascript页面URL（由我的本地主机上的同一节点js服务器生成的页面） - 一切正常。

请告知我是否遗漏了某些东西，或者我需要尝试其他方法。

我设法在我的localhost上配置了所有依赖项的puppeteer，如下所示：

目前'html'变量只返回获取的URL的源代码，我需要接收所请求URL的完全呈现的DOM。

server.js中的代码

var puppeteer = require('puppeteer');

async function ssr(url) {
  console.info('rendering the page in ssr mode');
  const browser = await puppeteer.launch({headless: true});
  const page = await browser.newPage();

  try {
    await page.goto(url, {waitUntil: 'domcontentloaded'});
  } catch (err) {
    console.error(err);
    throw new Error('page.goto/waitForSelector timed out.');
  }

  const html = await page.content();
  await browser.close();
  return {html};
}

module.exports = ssr;

app.js中的代码

var err = require('http-errors');
var express = require('express');
var path = require('path');
var ssr = require('./ssr.js');

var app = express();

app.listen(3000, function(){ console.info('Server listening on port '); });

app.use('/index/', async(req, res) => {
  const { html } = await ssr(`www.example.com`);
  return res.send(html);
});

Answer 1

问题很可能是，您没有给页面足够的时间来呈现DOM内容。 {waitUntil: 'domcontentloaded'}只会等待DOMContentLoaded事件，而不是任何AJAX请求或DOM修改。

尝试使用'networkidle0'或'load'作为waitUntil函数的page.goto值。

如果这不起作用，您有两种选择：

• 使用await page.waitFor(1000)为页面提供固定的时间来呈现页面
• 在调用await page.waitForSelector(/* ... */)之前，使用page.content()等到加载特定选择器。这样您就可以确保加载了您感兴趣的文档部分。

Answer 2

尝试

const html = 'what ever you selector is but since you want the html just type in "html"'; 

let gg = await page.evaluate((sel) => {
        let element = document.querySelector(sel);
        console.log ('got Boom');
        return element? element.innerHTML: null;
    }, html);


    console.log (gg);