析动态内容

根据权威机构发布的全球互联网可访问性审计报告，全球约有四分之三的网站其内容或部分内容是通过JavaScript动态生成的，这就意味着在浏览器窗口中“查看网页源代码”时无法在HTML代码中找到这些内容，也就是说我们之前用的抓取数据的方式无法正常运转了。解决这样的问题基本上有两种方案，一是JavaScript逆向工程；另一种是渲染JavaScript获得渲染后的内容。

JavaScript逆向工程

下面我们以“360图片”网站为例，说明什么是JavaScript逆向工程。其实所谓的JavaScript逆向工程就是找到通过Ajax技术动态获取数据的接口。

但是当我们在浏览器中通过右键菜单“显示网页源代码”的时候，居然惊奇的发现页面的HTML代码中连一个<img>标签都没有，那么我们看到的图片是怎么显示出来的呢？原来所有的图片都是通过JavaScript动态加载的，而在浏览器的“开发人员工具”的“网络”中可以找到获取这些图片数据的网络API接口，

那么结论就很简单了，只要我们找到了这些网络API接口，那么就能通过这些接口获取到数据，当然实际开发的时候可能还要对这些接口的参数以及接口返回的数据进行分析，了解每个参数的意义以及返回的JSON数据的格式，这样才能在我们的爬虫中使用这些数据。

关于如何从网络API中获取JSON格式的数据并提取出我们需要的内容，在之前的《文件和异常》一文中已经讲解过了，这里不再进行赘述。

使用Selenium

尽管很多网站对自己的网络API接口进行了保护，增加了获取数据的难度，但是只要经过足够的努力，绝大多数还是可以被逆向工程的，但是在实际开发中，我们可以通过浏览器渲染引擎来避免这些繁琐的工作，WebKit就是一个利用的渲染引擎。

WebKit的代码始于1998年的KHTML项目，当时它是Konqueror浏览器的渲染引擎。2001年，苹果公司从这个项目的代码中衍生出了WebKit并应用于Safari浏览器，早期的Chrome浏览器也使用了该内核。在Python中，我们可以通过Qt框架获得WebKit引擎并使用它来渲染页面获得动态内容，关于这个内容请大家自行阅读《爬虫技术:动态页面抓取超级指南》一文。

如果没有打算用上面所说的方式来渲染页面并获得动态内容，其实还有一种替代方案就是使用自动化测试工具Selenium，它提供了浏览器自动化的API接口，这样就可以通过操控浏览器来获取动态内容。首先可以使用pip来安装Selenium。

pip3 install selenium

下面以“阿里V任务”的“直播服务”为例，来演示如何使用Selenium获取到动态内容并抓取主播图片。

import requests
from bs4 import BeautifulSoup
def main():
 resp = requests.get('https://v.taobao.com/v/content/live?catetype=704&from=taonvlang')
 soup = BeautifulSoup(resp.text, 'lxml')
 for img_tag in soup.select('img[src]'):
 print(img_tag.attrs['src'])
if __name__ == '__main__':
 main()

运行上面的程序会发现没有任何的输出，因为页面的HTML代码上根本找不到<img>标签。接下来我们使用Selenium来获取到页面上的动态内容，再提取主播图片。

from bs4 import BeautifulSoup
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
def main():
 driver = webdriver.Chrome()
 driver.get('https://v.taobao.com/v/content/live?catetype=704&from=taonvlang')
 soup = BeautifulSoup(driver.page_source, 'lxml')
 for img_tag in soup.body.select('img[src]'):
 print(img_tag.attrs['src'])
if __name__ == '__main__':
 main()

在上面的程序中，我们通过Selenium实现对Chrome浏览器的操控，如果要操控其他的浏览器，可以创对应的浏览器对象，例如Firefox、IE等。运行上面的程序，如果看到如下所示的错误提示，那是说明我们还没有将Chrome浏览器的驱动添加到PATH环境变量中，也没有在程序中指定Chrome浏览器驱动所在的位置。

selenium.common.exceptions.WebDriverException: Message: 'chromedriver' executable needs to be in PATH. Please see https://sites.google.com/a/chromium.org/chromedriver/home

为了解决上面的问题，可以到Selenium的官方网站找到浏览器驱动的下载链接并下载需要的驱动，在Linux或macOS系统下可以通过下面的命令来设置PATH环境变量，Windows下配置环境变量也非常简单，不清楚的可以自行了解。

export PATH=$PATH:/Users/Hao/Downloads/Tools/chromedriver/

其中/Users/Hao/Downloads/Tools/chromedriver/就是chromedriver所在的路径。

用说， Flash的效果大家都清楚。实际上，HTML5和JavaScript拥有很多新属性，可以用它们来替代Flash。W3Cschool精选16个超牛逼的HTML5和JavaScript特效，看了这些特效，未来的Web发展前途无量。

1.特效：FlowerPower

创作者使用花朵作为画刷，以贝兹曲线方式绘图。

2.特效：Breathing Galaxies

动态变换直径及颜色，可通过鼠标或键盘产生新形状，这个效果不错!

3.特效：Noise Field

移动鼠标可改变粒子运动，点击可随机生成不同粒子效果。

4.特效：HTML5 Canvas粒子效果文字动画特效

W3Cschool利用HTML5，制造出了粒子效果文字动画特效。只要你输入框中输入想要展示的文字，回车后即可在canvas上绘制出粒子效果的文字动画，相当酷的动画效果。

5.特效：Swirling Tentacles

三维脉冲效果，沿着脉冲线有运动的颜色渐变模块。

6.特效：Keylight

双击生成两个以后的键即可发出声音，移动键的位置可产生不同的声音效果。W3Cschool上面有很多这样的教程，有兴趣可以去看一下！

7.特效：Rotating Spiral

旋转的螺旋效果，单击可以控制开始和停止旋转，是不是觉得高大上？

8.Blob

拖动水滴有重力效果，双击可以分离，小水滴碰到大水滴会合并。

9.Trail

彩色颗粒跟随鼠标运动效果，带尾巴淡出效果。

10.Graph Layout

一种交互的力向图布局效果，刷新三观。

11.Typographic Effects

使用HTML5 Canvas实现的文本特性，效果超过Flash。

12.Crazy Tentacles

移动鼠标可以进行涂鸦，点击鼠标可以清除画布，看着确实疯狂。

13.Nebula

吸引眼球的粒子系统，目的是测试WebGL性能，如果滑动鼠标，可以产生绚丽效果。

14.WebGL Globe

WebGL Globe 是一个开放的地理数据可视化平台，我们鼓励你复制代码，添加自己的数据，创建自己的应用。

15.Particle Playground

用鼠标和粒子进行交互，能发现不一样的精彩。

16.Surface

使用WebGL实现的水面特效实验，可放入一张照片，使用鼠标触动水面会有奇特效果。

上面的HTML5和JavaScript特效，简直赶超Flash。W3Cschool上面有很多用户留言称HTML5和JavaScriptit将替代Flash，不过对于这种说法，也不知道怎么去评判。毕竟这些用户说的也是很有道理，你认为JavaScriptit会替代Flash吗?很想知道你的答案!

公众号：w3c技术教程

提供专业的web技术教程、手册、工具。