析動態內容

根據權威機構發布的全球互聯網可訪問性審計報告，全球約有四分之三的網站其內容或部分內容是通過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技術教程、手冊、工具。