如何获取JS执行后的页面？hQuery抓取Oddsportal动态内容问题

嘿，刚好碰到过类似的情况！hQuery这类静态HTML解析工具确实拿不到JS动态渲染的内容，因为它只会抓取页面初始的静态代码，那些显示为-的赔率是页面加载后通过JS异步请求数据再渲染出来的。不过不用急，有两个靠谱的办法可以解决，不一定非要换网站：

方法一：用无头浏览器模拟完整渲染 #

这类工具会模拟真实浏览器的行为，加载页面、执行所有JS代码，等页面完全渲染后再获取内容。推荐两个常用的：

• Puppeteer（Node.js生态）：上手简单，文档齐全
• Playwright（支持Node.js、Python、Java等多语言）：功能更强大，跨浏览器支持好

给你个Puppeteer的简单示例，用来获取渲染后的页面内容：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://www.oddsportal.com/search/Paris+SG/soccer/', { waitUntil: 'networkidle2' }); // 等待网络请求基本完成
  
  // 等待赔率元素加载完成（可以根据实际元素选择器调整）
  await page.waitForSelector('.odds-value:not(:contains("-"))');
  
  // 获取渲染后的页面HTML，或者直接提取赔率数据
  const pageContent = await page.content();
  // 或者直接提取所有赔率文本
  const odds = await page.evaluate(() => {
    return Array.from(document.querySelectorAll('.odds-value')).map(el => el.textContent);
  });
  
  console.log(odds);
  await browser.close();
})();

方法二：抓包找后端API接口 #

比起渲染整个页面，直接请求后端提供赔率数据的API会更高效。步骤如下：

1. 打开浏览器的开发者工具（F12），切换到「Network」标签
2. 刷新目标页面，过滤「XHR」或「Fetch」类型的请求
3. 逐个查看请求的响应内容，找包含赔率数据的接口（通常是JSON格式）
4. 直接用HTTP请求工具（比如Axios、Requests）调用这个API，就能拿到结构化的赔率数据了

比如你可能会找到类似/api/matches/xxx/odds这样的接口，请求参数里可能包含赛事ID之类的信息，直接复用这些参数就行。

要不要换网站？ #

如果上面两种方法能解决问题，完全没必要换——Oddsportal的赛事数据覆盖还是很全的。如果实在觉得麻烦，也可以考虑其他提供公开体育数据API的平台，但要注意查看对方的使用条款，避免版权问题。

内容的提问来源于stack exchange，提问作者pioupiou1211