获取JS动态内容

简介:

之前我们爬取的网页,多是HTML静态生成的内容,直接从HTML源码中就能找到看到的数据和内容,然而并不是所有的网页都是这样的。
有一些网站的内容由前端的JS动态生成,由于呈现在网页上的内容是由JS生成而来,我们能够在浏览器上看得到,但是在HTML源码中却发现不了。比如今日头条:

HTML源码
网页的新闻在HTML源码中一条都找不到,全是由JS动态生成加载。
遇到这种情况,我们应该如何对网页进行爬取呢?有两种方法:
1、从网页响应中找到JS脚本返回的JSON数据;2、使用Selenium对网页进行模拟访问
在此只对第一种方法作介绍,关于Selenium的使用,后面有专门的一篇。
一、从网页响应中找到JS脚本返回的JSON数据
即使网页内容是由JS动态生成加载的,JS也需要对某个接口进行调用,并根据接口返回的JSON数据再进行加载和渲染。
所以我们可以找到JS调用的数据接口,从数据接口中找到网页中最后呈现的数据。
就以今日头条为例来演示:
1、从找到JS请求的数据接口
F12打开网页调试工具

网页调试工具
选择“网络”选项卡后,发现有很多响应,我们筛选一下,只看XHR响应。
(XHR是Ajax中的概念,表示XMLHTTPrequest)
然后我们发现少了很多链接,随便点开一个看看:
我们选择city,预览中有一串json数据:

原来全都是城市的列表,应该是加载地区新闻之用的。
现在大概了解了怎么找JS请求的接口的吧?但是刚刚我们并没有发现想要的新闻,再找找看:
有一个focus,我们点开看看:

我们打开一个接口链接看看:http://www.toutiao.com/api/pc/focus/

返回一串乱码,但从响应中查看的是正常的编码数据:

有了对应的数据接口,我们就可以仿照之前的方法对数据接口进行请求和获取响应了
2、请求和解析数据接口数据
先上完整代码:


import requests
import json

url = 'http://www.toutiao.com/api/pc/focus/'
wbdata = requests.get(url).text

data = json.loads(wbdata)
news = data['data']['pc_feed_focus']

# print news
for n in news:    
  title = n['title']    
  img_url = n['image_url']    
  url = n['media_url']    
  print(json.dumps(title).decode("unicode-escape"))
  print img_url



本文转自 IT阿飞 51CTO博客,原文链接:http://blog.51cto.com/itafei/2072331
相关文章
|
数据采集 JavaScript 前端开发
使用Go和JavaScript爬取股吧动态信息的完整指南
本文介绍了如何使用Go和JavaScript构建网络爬虫,从股吧网站抓取实时股市信息。通过设置代理服务器以应对反爬策略,利用`got`库执行JavaScript提取动态数据,如用户讨论和市场分析。示例代码展示了爬虫的实现过程,包括浏览器实例创建、代理配置、JavaScript执行及数据打印。此方法有助于投资者及时获取市场资讯,为决策提供支持。
559 4
使用Go和JavaScript爬取股吧动态信息的完整指南
|
JavaScript
JS代码动态打印404页面源码
源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
103 0
JS代码动态打印404页面源码
|
JavaScript
js好用的动态分页插件
js好用的动态分页插件是一款简单的分页样式插件,支持样式类型,当前页,每页显示数量,按钮数量,总条数,上一页文字,下一页文字,输入框跳转等功能。
136 1
|
前端开发 JavaScript
使用JavaScript动态更改元素的CSS属性
【6月更文挑战第29天】使用JavaScript动态更改元素的CSS属性
316 3
|
JavaScript 前端开发
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
225 1
|
JavaScript 前端开发
js中改变this指向、动态指定函数 this 值的方法
js中改变this指向、动态指定函数 this 值的方法
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
401 1
|
JavaScript 前端开发
【专栏】`Function.prototype.apply` 在JavaScript中用于动态设定函数上下文(`this`)和参数列表
【4月更文挑战第29天】`Function.prototype.apply` 在JavaScript中用于动态设定函数上下文(`this`)和参数列表。它接受两个参数:上下文对象和参数数组。理解`apply`有助于深入JS运行机制。文章分三部分探讨其原理:基本概念和用法、工作原理详解、实际应用与注意事项。在应用中要注意性能、参数类型和兼容性问题。`apply`可用于动态改变上下文、传递参数数组,甚至模拟其他语言的调用方式。通过深入理解`apply`,能提升代码质量和效率。
204 3
|
JavaScript 前端开发
前端 JS 经典:动态执行 JS
前端 JS 经典:动态执行 JS
202 0
|
JavaScript
js -- 函数总结篇,函数提升、动态参数、剩余参数、箭头函数、this指向......
js -- 函数总结篇,函数提升、动态参数、剩余参数、箭头函数、this指向......