目錄(?)[-]

1. 一 安裝Phantomjs
2. 二 安裝CasperJS

一. 安裝Phantomjs

        下載地址：http:///
        官網(wǎng)介紹：
          PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.
          Full web stack No browser required.
        PhantomJS是一個(gè)服務(wù)器端的 JavaScript API 的WebKit（開源的瀏覽器引擎）。其支持各種Web標(biāo)準(zhǔn)： DOM 處理, CSS 選擇器, JSON, Canvas 和 SVG。PhantomJS可以用于頁(yè)面自動(dòng)化，網(wǎng)絡(luò)監(jiān)測(cè)，網(wǎng)頁(yè)截屏，以及無(wú)界面測(cè)試等。

        下載PhantomJS解壓后如下圖所示：

        在該文件夾下創(chuàng)建test.js文件，代碼如下：

[javascript] view plaincopy

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

        通過(guò)Ctrl+R打開CMD調(diào)用phantomjs.exe執(zhí)行該程序輸出如下圖所示：

        參考官方文檔：http:///documentation/
        1、腳本參數(shù)-arguments.js
        同時(shí)其自帶的examples文件夾中有很多模板代碼，其中獲取腳本參數(shù)代碼如下：

[javascript] view plaincopy

1. var system = require('system');  
2. if (system.args.length === 1) {  
3.     console.log('Try to pass some args when invoking this script!');  
4. } else {  
5.     system.args.forEach(function (arg, i) {  
6.             console.log(i + ': ' + arg);  
7.     });  
8. }  
9. phantom.exit();  

        運(yùn)行程序及輸出結(jié)果如下圖所示：
        phantomjs examples/arguments.js arg0 agr1 arg2 arg3

        2、網(wǎng)頁(yè)截圖

        在根目錄新建文件loadpic.js，其代碼如下：

[javascript] view plaincopy

1. var page = require('webpage').create();  
2. page.open('http://www.baidu.com', function () {  
3.     page.render('example.png');  
4.     phantom.exit();  
5. });  

        運(yùn)行程序結(jié)果如下圖所示：
        phantomjs loadpic.js

        短短5行代碼讓我第一次體會(huì)到了PhantomJS和調(diào)用腳本函數(shù)的強(qiáng)大，它加載baidu頁(yè)面并存儲(chǔ)為一張PNG圖片，這個(gè)特性可以廣泛適用于網(wǎng)頁(yè)快拍、獲取網(wǎng)頁(yè)在線知識(shí)等功能。同時(shí)也感受到了似乎能夠解決我最初的加載JS問(wèn)題。

        3、頁(yè)面加載-Page Loading
          A web page can be loaded, analyzed, and rendered by creating a web page object.
        通過(guò)創(chuàng)建一個(gè)網(wǎng)頁(yè)對(duì)象，一個(gè)網(wǎng)頁(yè)可以被加載，分析和渲染。examples文件夾中的loadspeed.js腳本加載一個(gè)特殊的URL (不要忘了http協(xié)議) 并且計(jì)量加載該頁(yè)面的時(shí)間。

[javascript] view plaincopy

1. var page = require('webpage').create(),  
2.     system = require('system'),  
3.     t, address;  
4.   
5. if (system.args.length === 1) {  
6.     console.log('Usage: loadspeed.js <some URL>');  
7.     phantom.exit(1);  
8. } else {  
9.     t = Date.now();  
10.     address = system.args[1];  
11.     page.open(address, function (status) {  
12.         if (status !== 'success') {  
13.             console.log('FAIL to load the address');  
14.         } else {  
15.             t = Date.now() - t;  
16.             console.log('Page title is ' + page.evaluate(function () {  
17.                 return document.title;  
18.             }));  
19.             console.log('Loading time ' + t + ' msec');  
20.         }  
21.         phantom.exit();  
22.     });  
23. }  

        運(yùn)行程序如所示：
        phantomjs examples/loadspeed.js http://www.baidu.com
        其中包括document.title獲取網(wǎng)頁(yè)標(biāo)題和t=Date.now()-t計(jì)算網(wǎng)頁(yè)加載時(shí)間。此時(shí)輸出如下圖所示，但會(huì)存在中文亂碼，如何解決呢？

        添加如下代碼即可：

        t = Date.now();
        address = system.args[1];
        phantom.outputEncoding="gbk";

         上面示例也提供了一種自定義user agent的方法。
         使用JQuery及其他類庫(kù)（Use jQuery and Other Libraries）。如果版本是1.6，你也可以把jQuery放入你的頁(yè)面中，使用page.includeJs如下：

二. 安裝CasperJS

        下載地址：http:///
        官方文檔：http://docs./en/latest/
        PS：準(zhǔn)備下一篇文章介紹