js的网页爬虫爬不到吗

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js的网页爬虫爬不到吗相关的知识,希望对你有一定的参考价值。

不是爬不到
是因为用js生成的网页,是通过浏览器加载js代码之后,由js动态生成的。
用爬虫直接去抓网页的话,抓下来的是原始代码,浏览器还未解析过的内容。
html 的话,抓下来可以直接拿来用,但是如果是由 js 动态生成的网页的话,就没办法直接用了。
像通过js动态加载的网页,理论上如果能用开源的浏览器内核将网页解析出来的话,通过浏览器内核提供的接口,完全可以把网页最终的 html 拿出来
参考技术A 爬不到,爬虫只认html

利用php加js实时爬取数据

一般我们做爬虫,都是用后端语言爬取数据之后存进数据库。
那我们前端是不是就不能玩爬虫了呢?NO,我们一起来看看这是什么奇技淫巧...
现在我们利用js来爬取,并实时使用这些数据,php仅仅把目标网页渲染后的html给转成字符串,并提供一个接口供我们调用以获取目标网页的html字符串。
至于为什么选php,那还用说吗,php不是世界上最好的语言吗?开玩笑的啦,不过php却是世界上部署最方便的后端语言,阿里云6块钱一年的虚拟主机丢进去就能跑起来。

先看一眼效果:


左边的是我写的,右边的是酷狗手机网页,除了换了层皮,是不是赶脚一毛一样?没错,数据全是爬取的,啦啦啦...
在线地址:http://www.xi-g.com/index


我们先新建一个php文件get_kugou.php:

<?php // 允许所有域访问header("Access-Control-Allow-Origin: *");// 接收一个参数,参数名叫url$url = $_GET['url'];// 酷狗的网址$crossUrl = 'http://m.kugou.com/'.$url;// 把这个网页读取后转成字符串$res = file_get_contents($crossUrl);// 输出这个字符串echo $res;?>

http://www.xi-g.com/get_kugou.php

我们可以先访问一下,然后再加个参数访问:

http://www.xi-g.com/get_kugou.php?url=/plist/index

是不是很神奇,通过参数可以间接访问酷狗任何一个页面...
接下来我们看怎么换皮,首先我们当然得把静态页面写好呀,我这里只演示怎么抓取数据:

// 调个ajax$.ajax({ 
    type:'get',    url: 'http://www.xi-g.com/get_kugou.php',    success: function(data) {        // 打印看看是个什么玩意
        console.log(data);
    }
});

打印一下:


利用php加js实时爬取数据


我们已经把整个酷狗首页的html字符串拿到了,接下来是重点,怎么提取数据:

$.ajax({ 
    type:'get',
    url: 'http://www.xi-g.com/get_kugou.php',
    success: function(data) {        // 创建一个div的盒子存起来
        var div = document.createElement('div');        // 把整个html的字符串存到这个div节点里
        div.innerHTML = data;        // 分析html结构后,把类名为.panel-songslist-item的元素全部存到list变量里
        // querySelectorAll()以数组形式返回所有匹配节点
        var list = div.querySelectorAll('.panel-songslist-item');        // 定义一个空数组
        var songList = [];        // 遍历list提取歌单数据,整理格式
        for(var i = 0; i<list.length; i++){            // 定义空对象
            var song = {};            // 查找类名为.panel-songs-item-name的元素里的span节点里的文本存到song.title属性
            song.title = list[i].querySelector('.panel-songs-item-name span').textContent;            // 取到每个list元素的id值
            song.hash = list[i].id.substr(6);            // 把song对象推入songList数组
            songList.push(song);
        }        // 我们来打印songList这个对象数组看看
        console.log(songList);
    }
});

打印结果:


利用php加js实时爬取数据


现在我们就把酷狗首页的歌单数据给拿到了,只要拿到数据就能构建我们的页面了,是不是十分神奇,关键点还是对querySelectorAll()和querySelector()这两个方法的运用,根据id名、class名、标签名来查找元素提取数据。
我们再来提取一下歌单页面的数据,还是老方法,但是需要仔细分析页面才能提取到我们想要的数据:


利用php加js实时爬取数据

$.ajax({ 
    type:"get",
    url: "http://www.xi-g.com/get_kugou.php?url=plist/index",
    success: function(data) {        var div = document.createElement('div');
        div.innerHTML = data;        var list = div.querySelectorAll('.panel-img-list li');        var plistList = [];        for(var i = 0; i<list.length; i++){            var plist = {};
            plist.imgUrl = list[i].querySelector('.panel-img-left img').getAttribute('_src');
            plist.plistName = list[i].querySelector('.panel-img-content-first').textContent;
            plist.plistNum = list[i].querySelector('.panel-img-content-sub').textContent;
            plist.location = "plist/list/"+list[i].querySelector('a').href.substr(30);
            plistList.push(plist);
        }
        console.log(plistList);
     }
});

打印结果:


深圳新闻网:http://m.sznews.com/
每一条新闻都是带a标签链接的,根据这个链接我们可以进行二次爬取,即从列表页爬进详情页...


以上是关于js的网页爬虫爬不到吗的主要内容,如果未能解决你的问题,请参考以下文章

怎么用python爬虫爬取可以加载更多的网页

网页爬虫

网络爬虫可以收集线下数据吗?

Java_爬虫,如何抓取Js动态生成数据的页面?

用python爬虫爬取携程网国内租车怎么获取所在地址的车辆信息、价格还有评分并安型号分类提取出来?

Python爬虫:为什么你爬取不到网页数据