爬虫实例——通过JS控制滚动条

案例

有能力的童鞋可以先尝试一下爬取每张照片的链接。

我曾经尝试过几种方法，下面一一介绍：

第一种方法，采用requests和BeautifulSoup：

import requests
from bs4 import BeautifulSoup

url = 'https://mm.taobao.com/self/album_photo.htm?spm=719.6642053.0.0.4JUVfm&user_id=687471686&album_id=10000702574&album_flag=0'
bs = BeautifulSoup(requests.get(url).text, 'lxml')
print len(bs('div', 'mm-photoimg-area'))

通过这种方法是得不到任何照片的，因为这个网站的照片是通过JS加载的，requests获取的源代码只是最基本的源代码，里面不含任一照片的链接。

第二种方法，采用selenium、PhantomJS和BeautifulSoup：

# -*- coding: utf-8 -*-
import sys
reload(sys)
sys.setdefaultencoding('utf-8')
from bs4 import BeautifulSoup
from selenium import webdriver

url = 'https://mm.taobao.com/self/album_photo.htm?spm=719.6642053.0.0.4JUVfm&user_id=687471686&album_id=10000702574&album_flag=0'
driver = webdriver.PhantomJS()
driver.get(url)
bs = BeautifulSoup(driver.page_source, 'lxml')
print len(bs('div', 'mm-photoimg-area'))

如无意外，你得到的结果应该是16，也就是16张图片，但是，如果你尝试滚动网页，你会发现其实并不止16张照片，这是因为淘宝采用的是ajax技术，只有通过下拉滚动条才会加载新的照片。

在网上查了好多资料都没找到解决方案，最后自己想了个办法：

# -*- coding: utf-8 -*-
import sys
reload(sys)
sys.setdefaultencoding('utf-8')
import time
from bs4 import BeautifulSoup
from selenium import webdriver

url = 'https://mm.taobao.com/self/album_photo.htm?spm=719.6642053.0.0.4JUVfm&user_id=687471686&album_id=10000702574&album_flag=0'
driver = webdriver.PhantomJS()
driver.get(url)
js1 = 'return document.body.scrollHeight'
js2 = 'window.scrollTo(0, document.body.scrollHeight)'
old_scroll_height = 0
while(driver.execute_script(js1) > old_scroll_height):
    old_scroll_height = driver.execute_script(js1)
    driver.execute_script(js2)
    time.sleep(3)
bs = BeautifulSoup(driver.page_source, 'lxml')
print len(bs('div', 'mm-photoimg-area'))

如无意外，你得到的结果应该是45，也就是45张照片，这也是该相册的照片总数。

下面介绍一下这段代码的原理：

原理

通过js1可以获取body对象的高度，通过js2可以下拉滚动条。

先将上一次获取的body对象的高度（old_scroll_height）设为0，然后获取最新的body对象的高度，跟上一次获取的进行比较，如果比上一次的值大，就把最新的值赋值给old_scroll_height，然后下拉滚动条，休眠3秒钟，再循环比较，直到最新的值不比上一次的值大为止。