js 抓取网页内容(HTML源码中的内容由前端的动态生成，我们应该如何对网页进行模拟访问 )

　　js 抓取网页内容(HTML源码中的内容由前端的动态生成，我们应该如何对网页进行模拟访问

)

　　我们以前爬网的大多数网页都是静态生成的HTML内容。我们可以直接从HTML源代码中找到数据和内容。然而，并不是所有的网页都是这样的

　　网站的某些内容由前端JS动态生成。因为网页上显示的内容是由JS生成的，所以我们可以在浏览器中看到它，但在HTML源代码中找不到它。例如，今天的标题：

　　浏览器呈现的网页如下所示：

　　请看源代码，但它是这样的：

　　在HTML源代码中找不到该网页的新闻。它都是由JS动态生成和加载的

　　在这种情况下，我们应该如何抓取网页？有两种方法：

　　1、查找JS脚本从网页响应返回的JSON数据2、使用selenium模拟访问网页

　　一、从网页响应中查找JS脚本返回的JSON数据

　　即使web页面内容是由JS动态生成和加载的，JS也需要调用一个接口，并根据接口返回的JSON数据进行加载和呈现

　　因此，我们可以找到JS调用的数据接口，并从数据接口中找到最终显示在web页面中的数据

　　以今天的头条新闻为例：

　　1、从中查找JS请求的数据接口

　　F12开放式web调试工具

　　选择“网络”选项卡后，我们发现有许多响应。让我们进行筛选，只看XHR响应

　　（XHR是Ajax中的一个概念，代表XMLHttpRequest）

　　然后我们发现有很多链接丢失了。单击打开一个：

　　我们选择city，预览中有一串JSON数据：

　　让我们再次打开它：

　　结果是一张城市名单。应该使用它来加载区域新闻

　　现在您可能知道如何找到JS请求的接口了吧？但是我们没有找到我们刚才想要的消息。再看一看,

　　有一个焦点。让我们点击查看：

　　主页上图片新闻显示的数据是相同的，所以数据应该在这里

　　请参阅其他链接：

　　这应该是热搜索关键词

　　这是图片新闻下面的新闻

　　让我们打开一个接口链接以查看：

　　返回一组乱码，但从响应中查看正常编码数据：

　　通过相应的数据接口，我们可以按照前面的方法请求并获取数据接口的响应

　　2、请求和解析数据接口数据

　　首先完成代码：

　　# coding：utf-8

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']

for n in news:    

  title = n['title']    

  img_url = n['image_url']    

  url = n['media_url']    

  print(url,title,img_url)

　　返回的结果如下：

　　代码分为四个部分

　　第一部分：介绍相关图书馆

　　# coding：utf-8

import requests

import json

　　第二部分：数据接口的http请求

　　url = 'http://www.toutiao.com/api/pc/focus/'

wbdata = requests.get(url).text