Puppeteer无法获取完整的源代码

Question

我正在使用Node.js和Puppeteer创建一个简单的抓取应用程序。 我要抓取的页面是this。下面是我现在正在使用的代码。

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，这正是我所期望的。

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

我做错什么了吗？我不是在等Javascript完成吗？

Answer 1

页面正在使用框架。您只会看到页面的主要内容（没有框架的内容）。要同时获取框架的内容，您需要首先找到框架（例如，通过page.$），然后通过elementHandle.contentFrame获取其框架手柄。然后，您可以调用frame.content()来获取框架的内容。

简单示例

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

根据页面的结构，您需要对多个框架执行此操作以获取所有内容，或者甚至需要对框架内部的一个框架执行此操作（给定页面似乎是这种情况）。 / p>

读取所有框架内容的示例

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

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