我在 "文科生也可以輕鬆學習網路爬蟲" 這本書中讀到, 在開發爬蟲程式前可以先安裝一個 Chrome 擴充功能 Quick Javascript Switcher 來判斷要爬的目標網頁是否透過 Javascript 來生成內容, 今天就來安裝看看唄!
首先按 Chrome 右上角那三個垂直的點點按鈕, 然後點選 "擴充功能", 再點選 "前往 Chrome 線上應用程式商店" :
在線上商店網頁右上角的搜尋框輸入 "Quick Javascript Switcher" 後按 Enter 就可搜尋到此程式, 按一下此項目進入該擴充功能說明網頁 :
回上一頁重新搜尋 "Quick Javascript Switcher" 會顯示 "已安裝" :
這時在瀏覽器右上角會出現 Quick Javascript Switcher 的圖示 :
只要按此按鈕即可切換 (toggle) Javascript 的啟用或禁用, 若網頁內容為使用 Javascript 生成 (含 Ajax), 則在 Javascript 禁用時內容會消失, 啟用時才會出現, 例如 :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<style>
#container {border: 1px solid blue; width:200px; height:100px;}
</style>
</head>
<body>
<h3>Javascript 生成的網頁測試</h3>
<div id="container"></div>
<script>
var container=document.getElementById('container');
var list=document.createElement('ul');
var items=['金智媛', '金秀賢', '孫藝珍'];
for (var i=0; i < items.length; i++) {
var listItem=document.createElement('li');
listItem.textContent=items[i];
list.appendChild(listItem);
}
container.appendChild(list);
</script>
</body>
</html>
此網頁在 id=container 的 div 元素內, 利用 Javascript 建立 ul-li 元素組成的清單, 當 Javascript 啟用時會顯示內容 :
當按下 Quick Javascript Switcher 的圖示禁用 Javascript 時內容會消失 :
像這種由 Javascript 生成內容的網站無法直接利用 BeautifulSoup 來剖析, 因為 requests 擷取到的網頁內容是 Javascript 執行前的內容, 所以 BeautifulSoup 所建立的語法樹物件, 必須改用 Selenium 模擬瀏覽器抓到 Javascript 執行後的網頁內容再交給 BeautifulSoup 剖析.
>>> import requests
>>> from bs4 import BeautifulSoup
>>> url='https://tony1966.github.io/test/python/web_crawler/javascript_created_content.htm'
>>> response=requests.get(url)
>>> soup=BeautifulSoup(response.text, 'lxml')
>>> soup.div
<div id="container"></div>
可見剖析後並未看到 Javascript 生成的清單元素.
沒有留言 :
張貼留言