javascript - 如何强制 puppeteer 等待 XMLHttpRequests 结束等，并获得完成版本的 DOM？

Question

我目前有一个网页，它通过 XMLHttpRequest 动态加载一些元素。这是它的 javascript 部分:

function loadHtmlSnippet(filename, callback) {
    var xmlHttp = new XMLHttpRequest();

    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4) {
            parser = new DOMParser()
            minidoc = parser.parseFromString(xmlHttp.responseText, "text/html")
            minibody = minidoc.getElementsByTagName('body')[0]
            callback(minibody)
        }
    };

    xmlHttp.open("GET", 'http://localhost:3000/' + filename, true);
    xmlHttp.send(null);
}

这是通过调用...来使用的

loadHtmlSnippet('my_extra_html_piece.html', my_appropriate_callback)

...其中 my_appropriate_callback 是将 my_extra_html_piece.html DOM 插入主页 DOM 中某个适当位置的函数。

到目前为止一切顺利，它有效!

接下来，在所有加载结束后，我想以字符串的形式获得完成的 DOM。为此，我一直在尝试使用 Chromium puppeteer。这是我的 puppeteer node.js 脚本:

const express = require('express')
const puppeteer = require('puppeteer')

url = process.argv[2]

async function ssr(url) {
    const browser = await puppeteer.launch({
        headless: true
    });
    const page = await browser.newPage();
    await page.goto(url, {
        waitUntil: 'networkidle0'
    });
    html = await page.content();
    await browser.close();
    return html;
}

async function start() {
    html = await ssr(url)
    console.log(html)
}

start()

(我基本上是从 puppeteer 教程中剪切粘贴的。)

唉，上面的脚本在一些 javascript 处理完成后返回给我 DOM，但不是在 XMLHttpRequest 完成加载并将它们各自的 HTML 插入到主 DOM 之后。

有没有什么方法可以强制 puppeteer 在保存呈现的 html 并关闭之前等待 javascript 真正完成旋转？

====

旁白:我对 this question 中讨论的序列化方法有些运气。 ，但是当我将 puppeteer 用于其他事情时，如果我也可以通过 puppeteer 完成 DOM 序列化的这一部分，那就太好了。 (所以这个问题是特定于 puppeteer 操纵者的。)

Answer 1

await page.waitForNavigation({ waitUntil: 'domcontentloaded' });