Question

我正在尝试迭代ElementHandles数组并将其附加到第二个Page中，如下所示：

const htmlContent: string = `
    <html><head></head><body>
        <div class="section">Section 1</div>
        <div class="section">Section 2</div>
        <div class="main-container"></div>
    </body></html>`

let browser: Browser = await Puppeteer.launch();
const firstPage: Page = await browser.newPage();
const secondPage: Page = await browser.newPage();
await firstPage.goto('data:text/html;charset=UTF-8,' + htmlContent);
await secondPage.goto('data:text/html;charset=UTF-8,' + htmlContent);
let sections: ElementHandle[] = await firstPage.$$('.section');

for (const section of sections) {
    secondPage.$eval('.main-container', (el: any, section: ElementHandle) => {
        el.append(section);
    }, section);
}

browser.close()

我将此代码基于ElementHandle类的Puppeteer文档：

ElementHandle实例可用作page。$ eval（）和page.evaluate（）方法中的参数。

但是，这不起作用。它生成带有以下消息的堆栈跟踪：

错误：JSHandles只能在创建上下文的情况下进行评估！

我试图将节定义为any，并将JSHandle定义为相同的结果。我一直在api文档中搜索有关我做错了什么而没有结果的任何提示。

任何帮助将不胜感激！

Answer 1

错误消息所指的“上下文”是页面-您正在尝试将元素从一个页面复制到另一页面，这简直是不允许您这样做的，不幸的是，没有方法可以序列化它们，因此您可以通过他们。也就是说，只要丢失任何带外数据（例如事件侦听器或JavaScript中设置的其他属性）是可以接受的，则可以复制outerHTML：

const htmlContent: string = `
<html><head></head><body>
<div class="section">Section 1</div>
<div class="section">Section 2</div>
<div class="main-container"></div>
</body></html>`;

let browser: Browser = await Puppeteer.launch();
const firstPage: Page = await browser.newPage();
const secondPage: Page = await browser.newPage();
await firstPage.goto("data:text/html;charset=UTF-8," + htmlContent);
await secondPage.goto("data:text/html;charset=UTF-8," + htmlContent);
let sectionsAsHtml: string[] = await firstPage.$$eval(
  ".section",
  (elements: Element[]) => Array.from(elements).map(e => e.outerHTML)
);

for (const section of sectionsAsHtml) {
  await secondPage.$eval(".main-container", e => (e.innerHTML += section));
}

browser.close();

如何将ElementHandle移到另一个页面

1 个答案: