как пролистать несколько фреймов в кукловоде

Question

Я пытаюсь создать PDF-файл с несколькими iframe, используя puppeteer.Одна проблема, с которой я сталкиваюсь, заключается в том, что, если я встраиваю что-то вроде карт Google, карты Google будут загружаться медленно (он загружается только тогда, когда элемент находится в точке обзора браузера. Одним из решений является прокрутка различных фреймов на странице и установка времени ожидания.время загрузки каждого iframe.

вот что у меня есть (возможность тестирования в https://try -puppeteer.appspot.com / ) кукловод: версия 1.9.0, ятакже пробовал в 1.12.0, не мог заставить прокрутку работать, ни время ожидания.

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setViewport({
  width: 1280,
  height: 750
});
await page.emulateMedia('screen');
const html = '<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12077.188806999058!2d-73.2243774!3d40.8214352!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x9e562057f79c0860!2sH+Lee+Dennison+Building!5e0!3m2!1sen!2sus!4v1547750310674" height="250" width="600" allowfullscreen=""></iframe><div><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12077.188806999058!2d-73.2243774!3d40.8214352!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x9e562057f79c0860!2sH+Lee+Dennison+Building!5e0!3m2!1sen!2sus!4v1547750310674" height="250" width="600" allowfullscreen=""></iframe></div><div><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12077.188806999058!2d-73.2243774!3d40.8214352!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x9e562057f79c0860!2sH+Lee+Dennison+Building!5e0!3m2!1sen!2sus!4v1547750310674" height="250" width="600" allowfullscreen=""></iframe></div><div><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12077.188806999058!2d-73.2243774!3d40.8214352!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x9e562057f79c0860!2sH+Lee+Dennison+Building!5e0!3m2!1sen!2sus!4v1547750310674" height="250" width="600" allowfullscreen=""></iframe></div>'

await page.setContent(html, { waitUntil: 'networkidle0' });
const frames = await page.mainFrame().childFrames(); // get all the iframes on that page. 
await page.evaluate((frames) => {
     // this part does not work
     for (let i=0, i<frames.length; i++){
        setTimeout(() => {
         document.querySelectorAll('iframe')[i].scrollIntoView();
        }, 2000)
     }
  }, frames)
const pdf = await page.pdf({
  scale: 1,
  printBackground: true,
  margin: { bottom: 0 },
  path: 'screenshot.pdf'
});

await browser.close();

Любая помощь приветствуется!

Answer 1

В этом коде есть некоторые проблемы:

1. frames - это не сериализуемый объект из контекста Node.js, поэтому его нельзя передать в контексте браузера как есть.
2. Все setTimeout() обратные вызовы будут вызываться сразу через 2 секунды, поэтому у каждого кадра не будет достаточно времени для загрузки.
3. Эти setTimeout() обратные вызовы не ожидаются: page.evaluate() возвращается до того, как пройдут эти 2 секунды, иСоздание PDF происходит до загрузки iframe.

Вы можете попробовать этот подход:

// page loaded

await page.evaluate(async () => {
  for (const iframe of Array.from(document.querySelectorAll('iframe'))) {
    iframe.scrollIntoView();
    await new Promise((resolve) => { setTimeout(resolve, 2000); });
  }
});

// pdf creation