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。这是我的操纵up的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()

（我基本上是从木偶教程中剪切粘贴的。）

A，上面的脚本在完成一些javascript处理后向我返回了DOM，但在XMLHttpRequest完成加载并将它们各自的HTML插入到主DOM中之后没有返回。

在保存渲染的html并关闭之前，是否有某种方法可以强制伪装者等待javascript完成旋转？

====

此外：this question中讨论的序列化方法让我很幸运，但是当我使用puppeteer进行其他操作时，如果我也可以通过puppeteer来完成DOM序列化的这一部分，那就太好了。（所以问题是特定于操纵up的。）

Answer 1

await page.waitForNavigation（{waitUntil：'domcontentloaded'}）;

如何强制p操纵者等待XMLHttpRequests结束等，并获得DOM的最终版本？

1 个答案: