node.js - waitUntil: 'domcontentloaded' 后并非所有 DOM 内容都准备就绪

Question

也许我对domcontentloaded的解释是错误的，但我希望当时所有元素都可以访问，而且查询它们应该没有问题。

考虑以下：

await page.goto(url, { waitUntil: 'domcontentloaded' });
const elements = await page.$$('#myId');

在这种情况下，elements.length 为 0，但如果我在查询之前等待选择器，则元素现在包含该元素：

await page.goto(url, { waitUntil: 'domcontentloaded' });
await page.waitForSelector('#SignIn-emailInput'); // <-- this shouldn't be required
const elements = await page.$$('#myId');

不应该 waitUntil: 'domcontentloaded' 导致 goto 在所有元素都准备好被查询之前不解析吗？是在这里等待“networkidle0”解决方案，还是有更好的方法来知道一切准备就绪？

标签： node.jsdompuppeteer

Answer 1

当页面的原始 HTML 中的所有元素都已被解析并插入到 DOM 中时，domcontentloaded 会触发。但是，这就是它告诉你的全部。如果元素以其他方式添加到页面中，则在 domcontentloaded 触发后很容易发生这种情况。

页面有许多其他获取添加内容的方法，例如直接插入元素或进行 Ajax 调用然后在 Ajax 调用返回结果后插入元素的 Javascript。这些都可以在 domcontentloaded 之后完成。

当 Javascript 插入元素时，没有标准事件可以知道何时可以完成，因为它是特定于页面的代码，实际上可以做任何事情。要弄清楚它何时完成，通常需要对页面中的代码进行一些检查，以了解您如何检测它何时完成。在最坏的情况下，您必须轮询内容，直到看到一些指示 Javascript 已完成其工作的标记元素。在更好的情况下，您可以更直接地挂钩到页面正在执行的其他操作以了解何时完成。