如何使用cheeriojs 访问iframe #document？答案

【问题标题】：How to access the iframe #document using cheeriojs?如何使用cheeriojs 访问iframe #document？
【发布时间】：2019-06-18 18:20:48
【问题描述】：

我正在尝试抓取动漫视频页面 [jkanime]，但我遇到了 mp4 视频格式的问题，因为它们位于 iframe #document 中。

我曾尝试使用cheerio 进行查询，但我只设法获得了两个来自facebook 插件的src。就好像我没有认出 mp4 所在的 ifra。

在 chrome 开发工具中，我输入了以下内容： $('#jkvideo_html5_api 源')

mp4 的 src 向我展示了。但是，当我将相同的查询与cheerio 一起使用时，什么也没有发生。

我已经尝试了数周来尝试获取 mp4，但我做不到。任何帮助都将受到欢迎。

图片

devtool source code section

  const getAnimeVideo = async (id: string, chapter: number) => {
    const res = await fetch(`${url}${id}/${chapter}/`);
    const body = await res.text();
    const $ = cheerio.load(body);
    const arr = [];
    $('iframe').each((index, element) => {
      const $element = $(element);
      const x = $element.attr('src');
      console.log(x);
      arr.push(x);
    });
    return arr;
}

获得的输出

{
  "videos": [
    "https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fjkanimetv%2F&width=132&layout=box_count&action=like&size=large&show_faces=false&share=false&height=21&appId=149291901844100",
    "https://www.facebook.com/plugins/like.php?href=https://jkanime.net/tokyo-ghoul/1/&width=76&layout=box_count&action=like&size=small&show_faces=false&share=false&height=65&appId=149291901844100"
  ]
}

我想获得的输出

{
  "videos": [
    "https://storage.googleapis.com/markesito.appspot.com/blakkkk-88.mp4"
   ]
}

更新：晚上 10:52

使用 puppeteer，我找到了使用“player_conte”类访问 iframe 的方法。它在终端中显示以下输出：

_navigationURL

现在..我不知道如何从 _navigationURL 获取链接

为了能够与cheerio一起使用并参考视频的来源。

代码更新

const getAnimeVideo = async (id: string, chapter: number) => {
  const BASE_URL = `${url}${id}/${chapter}/`  // => https://jkanime.net/tokyo-ghoul/1/
  const browser = await puppeteer.launch() 
  const page = await browser.newPage()
  await page.goto(BASE_URL);

  const elementHandle = await page.$('.player_conte')
  const frame = await elementHandle.contentFrame();
  const $ = cheerio.load(`${frame}`);
  console.log(frame)
}

【问题讨论】：

这是渲染的 html，而不是源代码。源是您在“查看源”时看到的。您可能想为此使用 puppeteer。
@pguardiario 任何例子，如何解决？
@pguardiario 设法引用了 iframe，但我不知道如何使用 puppeteer 获取 src。
如果您切换到 puppeteer，您需要提出一个新问题。这个问题是关于cheerio的。

标签： javascript typescript iframe web-scraping cheerio

【解决方案1】：

使用 puppeteer 解决问题

const getAnimeVideo = async (id: string, chapter: number) => {
  const BASE_URL = `${url}${id}/${chapter}/`  // => https://jkanime.net/tokyo-ghoul/1/
  const browser = await puppeteer.launch() 
  const page = await browser.newPage()
  await page.goto(BASE_URL);
  const elementHandle = await page.$('.player_conte')
  const frame = await elementHandle.contentFrame();
  const video = await frame.$eval('#jkvideo_html5_api', el =>
  Array.from(el.getElementsByTagName('source')).map(e => e.getAttribute("src")));
  return video;
 }

【讨论】：