如何在puppeteer / headless Chrome中获取Document.readyState？

Question

使用puppeteer，我无法弄清楚如何获取document.readyState。我需要等到页面加载后再撕掉pdf。

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

    console.log('Setting HTML content...');

    // Can't POST data with headless chrome, so we have to get the HTML and set the content of the page, then render that to a PDF
    await page.setContent(html);

    // Generates a PDF with 'screen' media type.
    await page.emulateMedia('screen');

    var renderPage = function () {
        return new Promise(async resolve => {

            await page.evaluate((document) => {
                console.log(document);
                const handleDocumentLoaded =  () => {
                    console.log('readyState: ', document.readyState);
                    console.log('Rendering PDF...');
                    Promise.resolve(resolve(page.pdf({ path: thisPDFfileName, format: 'Letter' })));
                };
                if (document.readyState === "loading") {
                    document.addEventListener("DOMContentLoaded", handleDocumentLoaded);
                } else {
                    handleDocumentLoaded();
                }
            });

            // I also tried this... no luck
            // setTimeout(async function () {
            //     console.log('Awaiting document...');
            //
            // const handle = await page.evaluateHandle(() => ({window, document}));
            // const properties = await handle.getProperties();
            // const windowHandle = properties.get('window');
            // const documentHandle = properties.get('document');
            // await handle.dispose();
            //
            //     console.log('readyState: ', documentHandle.readyState);
            //     if ("complete" === documentHandle.readyState) {
            //         await documentHandle.dispose();
            //         console.log('readyState: ', doc.readyState);
            //         console.log('Rendering PDF...');
            //         resolve(page.pdf({ path: thisPDFfileName, format: 'Letter' }));
            //     } else {
            //         renderPage();
            //     }
            // }), 250;
        });
    };
    // Delay required to allow page to render JS before creating PDF
    await renderPage();
    await browser.close();
    sendPdfToClient();

我尝试了evaluateHandle，只能得到innerHTML，而不是文档对象本身。

获取包含document的readyState对象的正确方法是什么？

最后，如果我为loaded或DOMContentLoaded设置一个监听器，我需要等到谷歌地图JS呈现地图？如果需要，我可以发送自定义事件，因为我控制正在呈现的页面。

Answer 1

我想我过于复杂了。显然已经存在了

page.once('load', () => console.log('Page loaded!'));

这正是这个。 :-D

查看详细文档：

https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#event-load

有2个事件与您的问题相关

1. event: 'domcontentloaded'
2. event 'load'

Answer 2

如果您使用的是page.goto()，则可以使用waitUntil选项指定何时将导航视为完成：

waitUntil活动包括：

• load - 考虑在load事件被触发时完成导航。
• domcontentloaded - 考虑在DOMContentLoaded事件被解雇时完成导航。
• networkidle0 - 当至少500 ms的网络连接数不超过0时，考虑完成导航。
• networkidle2 - 当至少500 ms不超过2个网络连接时，考虑完成导航。

或者，您可以使用page.on()等待'domcontentloaded'事件或'load'事件。