JS基于浏览器的爬虫 - 注入Frame标签爬取二手车数据

一提到爬虫，大家可能会想到 Python，其完善的第三方库，使得一个刚入门的新手也可以写出一套套完整的爬虫程序，与此同时呢，网站的反爬虫措施也愈加强大。此次，我们另辟蹊径，使用 Javascript 来实现一种另类的爬虫！

简介

js 浏览器爬虫本质上就是通过 Javascript 操作 DOM对象来获取浏览器上的数据，相比 Python这类后端爬虫有着自己独特的优势：

• 方便分享 / 使用，只用把 JS 代码复制到浏览器即可
• 跑在客户端，几乎可以无视网站的反爬措施
• jQuery毫无疑问是最强悍的 HTML 解析工具
• 通过浏览器开发者工具轻松编写代码

提取某二手车标题

提取单页数据

打开浏览器开发者工具，通过 Chrome 自带的选择器选中标题，并复制 JS path

切换到 Console 选项卡，输入上一步复制的 JS path，并在结尾处补充 .innerText 即可成功获取到本条商品的标题

改进我们的代码，增加一个循环，以获取当前页面所有的标题

提取多页数据

思路：
1. 提取当前页数据
2. 点击下一页按钮

于是，便有下了下面的代码：

// 循环3次, 预计提取3页
for (var p = 0; p <= 2; p++) {
    // 当前页数据
    for (var i = 1; i <= 40; i++) {
        console.log(document.querySelector("body > div.list-wrap.js-post > ul > li:nth-child(" + i + ") > a > h2").innerText)
    }
    // 点击下一页按钮
    document.querySelector("body > div.list-wrap.js-post > div.pageBox > ul > li:nth-child(10) > a").click()
}

拷贝到浏览器控制台，数据打印成功，按钮点击成功，页面跳转成功，但是当我们跳转到下一页后，脚本却不在执行了！

因为在控制台中输入的代码仅作用于当前页面，当我们跳转下一页后，脚本也失效了。

此时我们借助 iframe 标签来实现多页的功能

with (document) {
    write('<iframe width="100%" height="100%" src="'+window.location.href+'"></iframe>');
    void (close())
}

最终的代码如下：

// 注入 frame
with (document) {
    write('<iframe width="100%" height="100%" src="'+window.location.href+'"></iframe>');
    void (close())
}
function show_data() {
    // 先切换到 frame 标签中再寻找元素

    // 当前页链接
    console.log(parent.frames[0].document.URL);
    // 当前页数据
    $(parent.frames[0].document).find('.car-a').each(function(){console.log($(this).attr('title'))});
    // 点击下一页按钮
    $(parent.frames[0].document).find('.next')[0].click();
}

// 启用定时器, 每隔2秒爬取一页
spiderTimer = setInterval(show_data, 2000);

效果如下：