Puppeteer создает PDF до загрузки всех фреймов

Question

Мне нужно создать PDF для веб-страницы, включающей около 20 фреймов, которые отображают некоторые диаграммы.Очевидно, мне нужно дождаться загрузки всех фреймов.Для этого я попробовал следующее (фрагмент):

const browser = await puppeteer.launch({ args: ['--no-sandbox'] })
const page = await browser.newPage()

const navigationPromise = page.waitForNavigation({waitUntil: 'networkidle0'})
await page.goto(url)  
await navigationPromise

const pdf = await page.pdf()
await browser.close()

Насколько я понимаю, опция waitUntil: 'networkidle0' должна ждать, пока сетевой трафик вообще не будет в течение 500 миллисекунд.Однако, iframes не всегда отображаются, некоторые да, другие нет.

Я также попытался networkidle2, но без улучшений (что должно работать для длительных сетевых подключений, что не в нашем случае).

Какой еще подход я могу попытаться проверить, все ли фреймы были загружены?

Answer 1

Как правило, события load и networkidle* должны срабатывать после загрузки кадров. Однако, если фреймы прикреплены к странице после разрешения page.waitForNavigation, вам может потребоваться специально прослушивать их для загрузки.

Существует событие framenavigated, которое «испускается, когда фрейм перемещается по новому URL». Если вы знаете количество кадров, которое вам нужно прослушать, вы можете просто подождать, пока все кадры будут загружены следующим образом:

const EXPECTED_NUMBER_OF_FRAMES = 5;
await Promise.all([
    new Promise(resolve => { // wait until all frames are navigated
        let numberOfLoadedFrames = 0;
        page.on('framenavigated', () => {
            numberOfLoadedFrames += 1;
            if (numberOfLoadedFrames === (EXPECTED_NUMBER_OF_FRAMES + 1)) {
                resolve();
            }
        });
    }),
    page.goto('...')
]);

Код будет прослушивать количество framenavigated вызовов событий и resolve Обещание, когда будет достигнуто ожидаемое число. Имейте в виду, что основной кадр также будет вызывать событие framenavigated один раз, поэтому EXPECTED_NUMBER_OF_FRAMES + 1 в моем коде.

В зависимости от сложности страницы, вы также можете прослушивать количество событий frameattached, которое будет сигнализировать, сколько кадров на странице. Таким образом, вы можете автоматически определить, сколько кадров на странице. Однако в этом случае сначала нужно подождать несколько миллисекунд, чтобы убедиться, что все кадры перехвачены.