PhantomJS是一款非常強(qiáng)大的WebKit瀏覽引擎。PhantomJS引擎沒(méi)有界面，用戶可以對(duì)它進(jìn)行腳本編程，可支持多種web標(biāo)準(zhǔn)，包括DOM操作，CSS選擇器，JSON，Canvas以及SVG，解壓到任意目錄，并將包含phantomjs.exe的目錄添加到系統(tǒng)路徑。

【功能介紹】

PhantomJS是一個(gè)基于webkit的JavaScript API。它使用QtWebKit作為它核心瀏覽器的功能，使用webkit來(lái)編譯解釋執(zhí)行JavaScript代碼。任何你可以在基于webkit瀏覽器做的事情，它都能做到。它不僅是個(gè)隱形的瀏覽器，提供了諸如CSS選擇器、支持Web標(biāo)準(zhǔn)、DOM操作、JSON、HTML5、Canvas、SVG等，同時(shí)也提供了處理文件I/O的操作，從而使你可以向操作系統(tǒng)讀寫(xiě)文件等。PhantomJS的用處可謂非常廣泛，諸如網(wǎng)絡(luò)監(jiān)測(cè)、網(wǎng)頁(yè)截屏、無(wú)需瀏覽器的 Web 測(cè)試、頁(yè)面訪問(wèn)自動(dòng)化等。

【安裝方法】

下載完成后解壓文件，建議為方便使用，單獨(dú)放在一個(gè)文件夾里，如我放在D:\workspace\phantomjs里。  
到這里，你已經(jīng)成功下載安裝好PhantomJS了。那么，打開(kāi)D:\workspace\phantomjs\bin文件夾，雙擊運(yùn)行phantomjs.exe，出現(xiàn)如下界面，那么你就可以運(yùn)行JS代碼了。  

由于我們都比較懶，不喜歡為了運(yùn)行一個(gè)程序總是跑到D:\workspace\phantomjs\bin文件夾打開(kāi)phantomjs.exe。那么，你可以將phantomjs.exe添加到環(huán)境變量里。具體如下：打開(kāi)我的電腦->右鍵屬性->高級(jí)系統(tǒng)設(shè)置->高級(jí)標(biāo)簽->環(huán)境變量，在系統(tǒng)變量里找到Path,將你的phantomjs添加到環(huán)境變量里。比方說(shuō)我的路徑添加的為“;D:\workspace\phantomjs\bin”，切記不要少了前面那個(gè)分號(hào)。

【使用方法】

開(kāi)始我們的第一個(gè)PhantomJS程序了。打開(kāi)你的工作目錄，新建文件hello.js，敲入以下代碼，Ctrl+S保存：

1 // a phantomjs example
2 var page = require('webpage').create();
3 phantom.outputEncoding="gbk";
4 page.open("http://www.cnblogs.com/front-Thinking", function(status) {
5 if ( status === "success" ) {
6 console.log(page.title);
7 } else {
8 console.log("Page failed to load.");
9 }
10 phantom.exit(0);
11 });

然后，打開(kāi)CMD命令行工具，切換到你的當(dāng)前目錄，敲入phantomjs hello.js，結(jié)果如下：


如果你的結(jié)果跟我的一樣，那么恭喜你，你已經(jīng)成功跑起來(lái)屬于你的第一個(gè)PhantomJS程序了。那么我們簡(jiǎn)要介紹下上面的代碼：第2行，webpage是phantomjs的核心模塊之一，它給用戶提供了訪問(wèn)、操作、選擇web文檔的接口。第3行，設(shè)置下編碼格式，否則輸出的可能是亂碼。第4行，運(yùn)行page.open函數(shù)，其中第一個(gè)參數(shù)是你要訪問(wèn)的url，第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)。在回調(diào)函數(shù)里我們檢查了下返回的狀態(tài)，如果是success那么我們就將瀏覽的url制定文檔的title打印出來(lái)，如你所見(jiàn)，如果不是那么打印文檔加載出錯(cuò)。最后一行退出phantomjs執(zhí)行環(huán)境。

【配置功能】

webpage：如你所見(jiàn)，上面的例子我們已經(jīng)見(jiàn)識(shí)了它的威力了。它的作用主要是提供了一套可以訪問(wèn)和操作web文檔的核心方法，包括操作DOM、事件捕獲、用戶事件模擬等等。
system：該模塊提供了一些與操作系統(tǒng)相關(guān)的接口，例如訪問(wèn)操作系統(tǒng)信息、訪問(wèn)系統(tǒng)環(huán)境變量、接受命令行參數(shù)等等與程序執(zhí)行相關(guān)的系統(tǒng)信息。
fs：即FileSystem。熟悉NodeJS的朋友都知道，NodeJS也內(nèi)建了相關(guān)的核心模塊。fs提供了執(zhí)行文件I/O操作的標(biāo)準(zhǔn)接口，如讀寫(xiě)文件、刪除文件等。它使得你持久化一些文件（如logfile等）變得非常容易。
webserver：如其名字一樣，你可以基于它來(lái)實(shí)現(xiàn)自己的webserver，用來(lái)處理請(qǐng)求并且執(zhí)行PhantomJS代碼等。

其它一些配置信息，執(zhí)行PhantomJS的命令格式如下：
1 phantomjs [switches] [options] [script] [argument [argument [...]]]
其中，各種參數(shù)都是可選的。例如我們第一個(gè)程序的執(zhí)行命令如下：
1 phantomjs hello.js
打開(kāi)debug模式（該模式用于開(kāi)發(fā)，可提供必要提示信息）：
1 phantomjs --debug=yes hello.js
設(shè)置cookie路徑：
1 phantomjs --cookie-file=cookie.txt hello.js

【使用技巧】

怎么選擇并操作DOM元素？

DOM選擇器，常用的getElementById、getElementByClassName、getElementByName、getElementByTagName、querySelector（CSS選擇器）。

我們看一個(gè)使用querySelector的例子：
1 var content = page.evaluate(function () {
2 var element = document.querySelector('#elem');
3     return element.textContent;
4 });
5 console.log(content);

evaluate函數(shù)是個(gè)新東西，其實(shí)很簡(jiǎn)單，就是在webpage環(huán)境下執(zhí)行evaluate傳入的回調(diào)函數(shù)，在這里面執(zhí)行與phantom相關(guān)的操作可以避免web頁(yè)面刺探phantom相關(guān)的設(shè)置信息。上面的代碼就比較簡(jiǎn)單了，不啰嗦了。
模仿用戶點(diǎn)擊事件：
phantomJS提供了兩種模仿點(diǎn)擊事件的接口，一個(gè)是sendEvent，phantomJS事件觸發(fā)器；一個(gè)是DOM事件觸發(fā)器。

我們先看看第一個(gè)，語(yǔ)法如下：
1 sendEvent( eventType, Point X, Point Y, button='left' )
2 eventType: mouseup  mousedown mousemove click doubleclick
3 Point X : 觸發(fā)事件的X坐標(biāo)
4 Point Y: 觸發(fā)事件的Y坐標(biāo)

第二個(gè)，我們都應(yīng)該比較熟悉了：
1 var evt = document.createEvent("MouseEvents");
2 evt.initMouseEvent(
3     "click", // 事件類型
4     true,
5     true,
6     window,
7     1,
8     1, 1, 1, 1, // 事件的坐標(biāo)
9     false, // Ctrl鍵標(biāo)識(shí)
10     false, // Alt鍵標(biāo)識(shí)
11     false, // Shift鍵標(biāo)識(shí)
12     false, // Meta鍵標(biāo)識(shí)
13     0, // Mouse左鍵
14     element); // 目標(biāo)元素
15 element.dispatchEvent(evt);

【常見(jiàn)問(wèn)題】