Puppeteer 无法获得完整的源代码

我正在使用 Node.js 创建一个简单的抓取应用程序傀儡师 https://github.com/GoogleChrome/puppeteer/。 我想要抓取的页面是。下面是我现在正在使用的代码。

const url = `https://www.betrebels.gr/el/sports?catids=122,40,87,28,45,2&champids=423,274616,1496978,1484069,1484383,465990,465991,91,71,287,488038,488076,488075,1483480,201,2,367,38,1481454,18,226,440,441,442,443,444,445,446,447,448,449,451,452,453,456,457,458,459,460,278261&datefilter=TodayTomorrow&page=prelive`
await page.goto(url, {waitUntil: 'networkidle2'});
let content: string = await page.content();
await page.screenshot({path: 'page.png',fullPage: true});
await fs.writeFile("temp.html", content);
//...Analyze the html and other stuff.

我得到的屏幕截图是this https://i.ibb.co/1LCJYjr/example.png这就是我所期待的。

另一方面，页面内容很少，并不代表图像上的数据。

难道我做错了什么？我没有正确等待 Javascript 完成吗？

该页面正在使用框架。您只能看到页面的主要内容（没有框架的内容）。要获取框架的内容，您需要首先找到框架（例如通过page.$ https://github.com/GoogleChrome/puppeteer/blob/v1.15.0/docs/api.md#pageselector）然后通过获取其帧句柄elementHandle.contentFrame https://github.com/GoogleChrome/puppeteer/blob/v1.15.0/docs/api.md#elementhandlecontentframe。然后你可以打电话frame.content() https://github.com/GoogleChrome/puppeteer/blob/v1.15.0/docs/api.md#framecontent获取框架的内容。

简单的例子

const frameElementHandle = await page.$('#selector iframe');
const frame = await frameElementHandle.contentFrame();
const frameContent = await frame.content();

根据页面的结构，您需要对多个框架执行此操作才能获取所有内容，或者甚至需要对框架内的框架执行此操作（给定页面的情况似乎如此）。

读取所有帧内容的示例

下面是递归读取页面上所有框架内容的示例。

const contents = [];
async function extractFrameContents(pageOrFrame) {
  const frames = await pageOrFrame.$$('iframe');
  for (let frameElement of frames) {
    const frame = await frameElement.contentFrame();
    const frameContent = await frame.content();

    // do something with the content, example:
    contents.push(frameContent);

    // recursively repeat
    await extractFrameContents(frame); 
  }
}
await extractFrameContents(page);