抓取Google图片指定a标签href失败，返回undefined

核心原因 #

Google图片页面里那个class为wXeWr.islib.nfEiy的a标签，它的href属性是通过客户端JavaScript动态生成的——你用unirest拿到的只是服务器返回的静态HTML源码，里面这个a标签根本没有href属性（或者只有空值），自然会返回undefined。而能抓到的VFACy...类的a标签，href是直接写在静态HTML里的，所以cheerio能正常解析到。

验证方法 #

你可以先把response.body打印出来，搜索目标a标签的代码，会发现它的结构大概率是这样的：

<a class="wXeWr islib nfEiy" data-href="实际链接地址">...</a>

也就是实际链接存在于data-href属性里，而非href。

解决办法 #

办法1：调整现有代码抓取对应属性 #

如果静态HTML里确实有data-href，直接修改代码里的属性获取部分：

console.log($(link).attr('data-href'), true);

办法2：用无头浏览器抓取动态内容 #

如果data-href也不存在，链接完全是JS动态生成的，就得用能模拟浏览器执行JS的工具，比如Puppeteer：

const puppeteer = require('puppeteer');

async function collectURLs(){
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.setUserAgent("Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36");
    await page.goto(URL);
    // 等待目标元素加载完成
    await page.waitForSelector('.wXeWr.islib.nfEiy');
    // 获取href属性
    const href = await page.$eval('.wXeWr.islib.nfEiy', el => el.href);
    console.log(href);
    await browser.close();
}

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