Как настроить Puppeteer для правильной визуализации внешних страниц JS? Работает только для локальных URL - PullRequest
Новая
       48

Как настроить Puppeteer для правильной визуализации внешних страниц JS? Работает только для локальных URL

1 голос
/ 26 марта 2019

Я пытаюсь настроить рендеринг на стороне сервера для внешних страниц Javascript.Я использую Puppeteer для этой цели, и когда я предоставляю какой-либо внешний URL-адрес (не страницы localhost), Puppeteer извлекает только исходный код URL-адреса (то, что вы можете видеть в режиме просмотра источника запрашиваемой страницы), не обрабатывая весь DOM,Когда я пытаюсь сделать SSR любым URL-адресом страницы Javascript на локальном хосте (страница, созданная тем же узлом js-сервером на моем локальном хосте) - все работает нормально.

Пожалуйста, сообщите, что я что-то упустил или мне нужно попробовать другой подход.

Мне удалось настроить puppeteer со всеми зависимостями на моем локальном хосте, как показано ниже:

В настоящее время переменная html возвращает только исходный код извлеченного URL, мне нужно получить полностью визуализированный DOMзапрошенного URL.

Код в 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);
});

Ответы [ 2 ]

2 голосов
/ 26 марта 2019

Вероятно, проблема в том, что вы не уделяете странице достаточно времени для визуализации содержимого DOM.{waitUntil: 'domcontentloaded'} будет ожидать только события DOMContentLoaded , но не запросов AJAX или изменений DOM.

Попробуйте использовать 'networkidle0' или 'load' в качестве waitUntil значения *Вместо этого используется функция 1009 * page.goto .

Если это не сработает, у вас есть два варианта:

  • Дать странице фиксированное количество времени для отображения страницы.используя await page.waitFor(1000)
  • Используйте await page.waitForSelector(/* ... */), чтобы дождаться загрузки определенного селектора перед вызовом page.content().Таким образом, вы можете быть уверены, что интересующие вас части документа загружены.
0 голосов
/ 26 марта 2019

попробуй 

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);
...