Background

因為最近有需要做一個Crawler, 但傳統的在網路上流傳的通常都只是抓Html Code 在進行 parse 的動作. 那現今的情況幾乎所有的 Web 都利用 Javascript 來跟後端溝通來獲取資料. 因此怎麼拿到 Javascript 執行完的資料變成現在的重點.

Introduction

PhantomJS 是一個無界面的, 可利用腳本編程的 WebKit 瀏覽器引擎,它原始支持多種web標準:DOM操作,CSS選擇器,JSON,Canvas以及SVG. 因此我們會利用它來完成Crawler.

Install

兩種方式, 自己選擇比較方便的即可:

  1. 到官網下載安裝包.
  2. 利用 npm, npm -g install phantomj

安裝完成之後, 到 Command line 中下 phantomjs -v 來檢查是否有安裝完成.

Start

helloworld.js

console.log('Hello, world!');
phantom.exit();

接著執行會看到以下結果. 不使用瀏覽器來執行 Javascript 程式

> phantomjs helloworld.js
Hello, world!

接著來玩一些不一樣的東西

helloworld.js

var page = require('webpage').create();
page.open('https://google.com', function (status) {
    console.log("Status: " + status);
    if (status === "success") {
        page.render('output.png');
    }
    phantom.exit();
});

執行 phantomjs helloworld.js. 接著你應該會發現多了一張圖. (通常越複雜的頁面執行的要越久)

DOM操作

可以模擬JavaScript的DOM操作和CSS選擇器. 下面的例子就修改了User-Agent, 然後還返回了頁面中某元素的內容.

var page = require('webpage').create();
console.log('The default user agent is ' + page.settings.userAgent);
//page.settings.userAgent = 'SpecialAgent';
page.open('https://google.com', function(status) {
  if (status !== 'success') {
    console.log('Unable to access network');
  }
  else {
    var title = page.evaluate(function() {
        return document.title;
    });
    console.log(title);
  }
  phantom.exit();
});

利用 evaluate 方法我們可以獲取網頁的源代碼, 接著執行程式碼來看看運行結果如何

> phantomjs helloworld.js
Hello, world!
The default user agent is Mozilla/5.0 (Macintosh; Intel Mac OS X) AppleWebKit/538.1 (KHTML, like Gecko) PhantomJS/2.1.1 Safari/538.1
Google

Reference