Как переместить ElementHandle на другую страницу - PullRequest
Новая
       6

Как переместить ElementHandle на другую страницу

0 голосов
/ 04 сентября 2018

Я пытаюсь перебрать массив ElementHandles и добавить их на вторую страницу следующим образом: 

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()

Я основываю этот код на документации Puppeteer для класса ElementHandle:

Экземпляры ElementHandle могут использоваться в качестве аргументов в методах page. $ Eval () и page.evaluate ().

Однако это не работает. Он генерирует трассировку стека со следующим сообщением:

Ошибка: JSHandles можно оценивать только в том контексте, в котором они были созданы!

Я попытался определить раздел как any, а также JSHandle с тем же результатом. Я искал в документации API любые подсказки относительно того, что я делаю неправильно, безрезультатно.

Буду признателен за любую помощь!

1 Ответ

0 голосов
/ 04 сентября 2018

«Контекст», к которому относится сообщение об ошибке, - это страница - вы пытаетесь скопировать элементы с одной страницы на другую, чего вам просто не разрешено делать, и, к сожалению, нет возможности их сериализации, чтобы вы могли передать их. Тем не менее, до тех пор, пока допустима потеря любых внеполосных данных (таких как прослушиватели событий или другие свойства, установленные в 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();
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...