PhantomJs的用法(二)——常用API

摘要： 1、命令列介面與REPL環境 假設構建了PhantomJS 並將其可執行檔案放在PATH中的某個位置，可以按如下方式呼叫它： phantomjs [options] example.js [arg1 [arg2 [...]]] 指令碼程式碼將像在具有空頁面的Web瀏覽器中執行一樣...

1、命令列介面與REPL環境

假設構建了PhantomJS 並將其可執行檔案放在PATH中的某個位置，可以按如下方式呼叫它：

phantomjs [options] example.js [arg1 [arg2 [...]]]

指令碼程式碼將像在具有空頁面的Web瀏覽器中執行一樣執行。由於PhantomJS是無頭的，因此螢幕上不會顯示任何可見的內容。 如果在沒有任何引數的情況下呼叫PhantomJS，它將進入互動模式（REPL），在這個環境中允許使用者通過命令列與PhantomJS互動。鍵入 phantomjs ，就進入了該環境。

這時會跳出一個 phantom 提示符，就可以輸入 Javascript 命令了。

按 Ctrl + C 即可退出該環境。

也可將上面的sum函式寫成一個sum.js檔案：

function sum (a, b) {
return a+b;
}

console.log(sum(2,3));// 在終端視窗顯示

phantom.exit();// 退出phantomjs環境

• 通常情況下，不管什麼樣的程式， phantom.exit(); 這一行都不能少。
• 為防止輸出中文時出現亂碼，可設定網頁編碼格式 phantom.outputEncoding="gbk"; 。

2、PhantomJs 常用內建物件

• webpage模組

webpage模組是PhantomJs的核心模組，用於網頁操作，獲取操作DOM或者web網頁的物件，通過它可以開啟網頁、接收網頁內容、request、response引數等。提供了一套可以訪問和操作web文件的核心方法，包括操作DOM、事件捕獲、使用者事件模擬等等。

var webPage = require('webpage');// 載入PhantomJs的webpage模組
var page = webPage.create();// 建立一個例項

• fs模組

獲取檔案系統物件，通過它可以操作作業系統的檔案操作，包括read、write、move、copy、delete等

var fs = require('fs');

• system模組

system模組可以獲得系統操作物件，包括命令列引數、phantomjs系統設定等資訊

var system = require('system');

system模組載入作業系統變數時， system.args 就是引數陣列。

3、PhantomJs常用API

由於webpage是PhantomJs的核心模組，所以PhantomJs常用的基本都是webpage的API，下面介紹常用的webpage例項的屬性與方法。

（1）常用方法

• open()

該方法用於開啟具體的網頁，該方法接受四種引數形式：

// url：將要被開啟的網頁的網址
// callback：網頁被徹底開啟完畢是的回撥函式
// method：用來指定HTPP的方法，預設為GET方法，也可指定為POST方法等
// data：用來指定該方法所要使用的資料
// settings：HTTP的配置物件
open(url, callback) {}

open(url, method, callback) {}

open(url, method, data, callback) {}

open(url, settings, callback) {}

開啟 baidu.com 並返回 success 或 fail ：

var page = require('webpage').create();
page.open('https://www.baidu.com/', function (status) {
console.log(status);// 若開啟成功則打印出success，否則輸出fail
phantom.exit();
});

注意，只要接收到伺服器返回的結果，PhantomJS就會報告網頁開啟成功，而不管伺服器是否返回404或500錯誤。

open 函式還可用於通過GET以外的方法請求URL。此語法還包括指定要隨請求一起傳送的資料。

var webPage = require('webpage');
var page = webPage.create();
var postBody = 'user=username&password=password';

page.open('http://www.google.com/', 'POST', postBody, function(status) {
console.log('Status: ' + status);
// Do other things here...
});

open 方法還允許提供配置物件，對HTTP請求進行更詳細的配置。

var webPage = require('webpage');
var page = webPage.create();
var settings = {
operation: "POST",
encoding: "utf8",
headers: {
"Content-Type": "application/json"
},
data: JSON.stringify({
some: "data",
another: ["custom", "data"]
})
};

page.open('http://your.custom.api', settings, function(status) {
console.log('Status: ' + status);
// Do other things here...
});

• evaluate()

evaluate 方法用於開啟網頁以後，在頁面中執行JavaScript程式碼，在所載入的web page內部執行該函式，像翻頁、點選、滑動等，均可在此中執行，在網頁內部無法訪問 phantom 物件。

evaluate(function, arg1, arg2, ...)

獲取網頁的標題

var page = require('webpage').create();
phantom.outputEncoding="gbk"; // 為防止輸出中文時出現亂碼，可設定輸出編碼格式
page.open('https://www.baidu.com/', function () {
var title = page.evaluate(function(){
return document.title;
});
console.log('Page title is ' + title);
phantom.exit();
});

網頁內部的 console 語句，以及 evaluate 方法內部的 console 語句，預設不會顯示在命令列。這時，可以用 onConsoleMessage 方法監聽這個事件，進行處理。

var page = require('webpage').create();

page.onConsoleMessage = function(msg) {
console.log('Page title is ' + msg);
}

page.open('https://www.baidu.com/', function () {
page.evaluate(function(){
console.log(document.title);
});

phantom.exit();
});

• includeJs()

includeJs 方法用於頁面載入外部指令碼，載入結束後就呼叫指定的回撥函式。

var page = require('webpage').create();

page.open('https://www.baidu.com/', function () {
page.includeJs('https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js', function () {
page.evaluate(function () {
$('.button').click();
});
phantom.exit();
});
});

上面的例子在頁面中注入 jQuery 指令碼，然後點選所有的按鈕。需要注意的是，由於是非同步載入，所以 phantom.exit() 語句要放在 page.includeJs() 方法的回撥函式之中，否則頁面會過早退出。

• render()

render(filename [, {format, quality}]) {}

render方法用於將網頁儲存成圖片，引數就是指定的檔名。該方法根據字尾名，將網頁儲存成不同的格式，支援的格式如下：

• PDF
• PNG
• JPEG
• BMP
• PPM
• GIF的支援取決於使用的Qt值

var page = require('webpage').create();

page.viewportSize = { width: 1920, height: 1080 };
page.open("https://www.baidu.com", function start(status) {
page.render('baidu_home.jpeg', {format: 'jpeg', quality: '100'});
phantom.exit();
});

該方法還可以接受一個配置物件， format 欄位用於指定圖片格式， quality 用於指定圖片質量，最小值為0，最大值為100，值越大，圖片的質量就越高。

（2）常用屬性

• viewportSize，zoomFactor

viewportSize 屬性指定瀏覽器視口的大小，即網頁載入的初始瀏覽器視窗大小。因為PhantomJS是無頭的（沒有顯示任何內容），所以 viewportSize 有效地模擬了傳統瀏覽器中視窗的大小。 viewportSize 的 Height 欄位必須指定，不可省略。

var webPage = require('webpage');
var page = webPage.create();

page.viewportSize = {
width: 480,
height: 800
};

zoomFactor 屬性用來指定渲染時（render方法和renderBase64方法）頁面的放大係數，預設是1（即100%）。如下是使用25％縮放建立縮圖預覽：

var webPage = require('webpage');
var page = webPage.create();

page.zoomFactor = 0.25;
page.render('capture.png');

• onLoadStarted

當 page.open() 呼叫時，會首先執行該回調函式，也就是頁面開始載入時呼叫此回撥，沒有引數傳遞給回撥，在此可以預置一些引數或函式，用於後邊的回撥函式中。

var webPage = require('webpage');
var page = webPage.create();

page.onLoadStarted = function() {
var currentUrl = page.evaluate(function() {
return window.location.href;
});
console.log('Current page ' + currentUrl + ' will be gone...');
};

• onResourceRequested

onResourceRequested 屬性用來指定一個回撥函式，當頁面請求一個資源時，會觸發這個回撥函式。它的第一個引數是HTTP請求的元資料物件，第二個引數是發出的網路請求物件。

requestData 元資料物件包含下面的屬性：

id
method
url
time
headers

networkRequest 物件包含以下方法：

bort()
changeUrl(newUrl)
setHeader(key, value)

var webPage = require('webpage');
var page = webPage.create();

page.onResourceRequested = function(requestData, networkRequest) {
var match = requestData.url.match(/wordfamily.js/g);
if (match != null) {
console.log('Request (#' + requestData.id + '): ' + JSON.stringify(requestData));
networkRequest.changeUrl('newWordFamily.js'); 
}
};

通過呼叫 networkRequest.changeUrl(newUrl) ，我們可以將請求URL更改為新URL。這是提供遠端資源替代實現的唯一方法。

• onResourceReceived

onResourceReceived 屬性用於指定一個回撥函式，當網頁收到所請求的資源時，就會執行該回調函式。它的引數就是伺服器發來的HTTP迴應的元資料物件， response 元資料物件包括以下欄位：

id
url
headers
bodySize
contentType
redirectURL
stage
status
statusText

如果HTTP迴應非常大，分成多個數據塊傳送， onResourceReceived 會在收到每個資料塊時觸發回撥函式。

var webPage = require('webpage');
var page = webPage.create();

page.onResourceReceived = function(response) {
console.log('Response (#' + response.id + ', stage "' + response.stage + '"): ' + JSON.stringify(response));
};

• onResourceError

當網頁無法載入資源或載入資源時出現了各種失敗時，將呼叫此回撥。回撥的唯一引數是 resourceError 元資料物件，該物件包含以下屬性：

id
url
errorCode
errorString

var webPage = require('webpage');
var page = webPage.create();

page.onResourceError = function(resourceError) {
console.log('Unable to load resource (#' + resourceError.id + 'URL:' + resourceError.url + ')');
console.log('Error code: ' + resourceError.errorCode + '. Description: ' + resourceError.errorString);
};

• 其他

• onConsoleMessage ：在執行web網頁時，列印一些輸出資訊到控制檯，則可以在此回撥顯示。

page.onConsoleMessage = function (msg) {}

• onAlert ： phantomjs 是沒有介面的，所以對 alert 也是無法直接彈出的，故 phantomjs 以該函式回撥在page執行過程中的 alert 事件。

page.onAlert = function(msg) {}

• onError ：當 page.open 中的url，它自己（不包括所引起的其它的載入資源）出現了異常，如404、no route to web site等，都會在此回撥顯示。

page.onError = function(msg, trace) {}

• onUrlChanged ：當 page.open 開啟的url或是該url在開啟過程中基於該URL進行了跳轉，則可在此函式中回撥。

page.onUrlChanged = function(targetUrl) {}

• onLoadFinished ：當 page.open 的目標URL被真正開啟後，會在呼叫open的回撥函式前呼叫該函式，在此可以進行內部的翻頁等操作。

page.onLoadFinished = function(status){}

更多詳情可參考 ofollow,noindex">PhantomJs官網API

PhantomJs系列文章

• PhantomJs的用法(一)——下載與安裝
• PhantomJs的用法(二)——常用API