PhantomJS學習--phantomjs入門教程

時間  2019-11-13
標籤 phantomjs 學習 入門 教程 欄目 JavaScript 简体版
原文   原文鏈接

PhantomJS

來自《JavaScript 標準參考教程（alpha）》，by 阮一峯javascript

PhantomJS官方APIphp

目錄

重要說明：本教程已經搬遷，此處再也不維護，請訪問新網址：wangdoc.com/javascript。css

概述

有時，咱們須要瀏覽器處理網頁，但並不須要瀏覽，好比生成網頁的截圖、抓取網頁數據等操做。PhantomJS的功能，就是提供一個瀏覽器環境的命令行接口，你能夠把它看做一個「虛擬瀏覽器」，除了不能瀏覽，其餘與正常瀏覽器同樣。它的內核是WebKit引擎，不提供圖形界面，只能在命令行下使用，咱們能夠用它完成一些特殊的用途。html

PhantomJS是二進制程序，須要安裝後使用。java

$ npm install phantomjs -g

使用下面的命令，查看是否安裝成功。jquery

$ phantomjs --version

REPL環境

phantomjs提供了一個完整的REPL環境，容許用戶經過命令行與PhantomJS互動。鍵入phantomjs，就進入了該環境。git

$ phantomjs

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

phantomjs> 1+2
3

phantomjs> function add(a,b) { return a+b; }
undefined

phantomjs> add(1,2)
3

按ctrl+c能夠退出該環境。web

下面，咱們把上面的add()函數寫成一個文件add.js文件。ajax

// add.js

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

console.log(add(1,2));

phantom.exit();

上面的代碼中，console.log()的做用是在終端窗口顯示，phantom.exit()則表示退出phantomjs環境。通常來講，無論什麼樣的程序，exit這一行都不能少。

如今，運行該程序。

$ phantomjs add.js

終端窗口就會顯示結果爲3。

下面是更多的例子。

phantomjs> phantom.version
{
  "major": 1,
  "minor": 5,
  "patch": 0
}

phantomjs> console.log("phantom is awesome")
phantom is awesome

phantomjs> window.navigator
{
  "cookieEnabled": true,
  "language": "en-GB",
  "productSub": "20030107",
  "product": "Gecko",
  // ...
}

webpage模塊

webpage模塊是PhantomJS的核心模塊，用於網頁操做。

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

上面代碼表示加載PhantomJS的webpage模塊，並建立一個實例。

下面是webpage實例的屬性和方法介紹。

open()

open方法用於打開具體的網頁。

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

page.open('http://slashdot.org', function (s) {
  console.log(s);
  phantom.exit();
});

上面代碼中，open()方法，用於打開具體的網頁。它接受兩個參數。第一個參數是網頁的網址，這裏打開的是著名新聞網站Slashdot，第二個參數是回調函數，網頁打開後該函數將會運行，它的參數是一個表示狀態的字符串，若是打開成功就是success，不然就是fail。

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

open方法默認使用GET方法，與服務器通訊，可是也可使用其餘方法。

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...
});

上面代碼中，使用POST方法向服務器發送數據。open方法的第二個參數用來指定HTTP方法，第三個參數用來指定該方法所要使用的數據。

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代碼。

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

page.open(url, function(status) {
  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(url, function(status) {
  page.evaluate(function() {
    console.log(document.title);
  });
  phantom.exit();
});

上面代碼中，evaluate方法內部有console語句，默認不會輸出在命令行。這時，能夠用onConsoleMessage方法監聽這個事件，進行處理。

includeJs()

includeJs方法用於頁面加載外部腳本，加載結束後就調用指定的回調函數。

var page = require('webpage').create();
page.open('http://www.sample.com', function() {
  page.includeJs("http://path/to/jquery.min.js", function() {
    page.evaluate(function() {
      $("button").click();
    });
    phantom.exit()
  });
});

上面的例子在頁面中注入jQuery腳本，而後點擊全部的按鈕。須要注意的是，因爲是異步加載，因此phantom.exit()語句要放在page.includeJs()方法的回調函數之中，不然頁面會過早退出。

render()

render方法用於將網頁保存成圖片，參數就是指定的文件名。該方法根據後綴名，將網頁保存成不一樣的格式，目前支持PNG、GIF、JPEG和PDF。

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

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

該方法還能夠接受一個配置對象，format字段用於指定圖片格式，quality字段用於指定圖片質量，最小爲0，最大爲100。

viewportSize，zoomFactor

viewportSize屬性指定瀏覽器視口的大小，即網頁加載的初始瀏覽器窗口大小。

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

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

viewportSize的Height字段必須指定，不可省略。

zoomFactor屬性用來指定渲染時（render方法和renderBase64方法）頁面的放大係數，默認是1（即100%）。

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

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

onResourceRequested

onResourceRequested屬性用來指定一個回調函數，當頁面請求一個資源時，會觸發這個回調函數。它的第一個參數是HTTP請求的元數據對象，第二個參數是發出的網絡請求對象。

HTTP請求包括如下字段。

  • id：所請求資源的編號
  • method：使用的HTTP方法
  • url：所請求的資源 URL
  • time：一個包含請求時間的Date對象
  • headers：HTTP頭信息數組

網絡請求對象包含如下方法。

  • abort()：終止當前的網絡請求，這會致使調用onResourceError回調函數。
  • changeUrl(newUrl)：改變當前網絡請求的URL。
  • setHeader(key, value)：設置HTTP頭信息。
var webPage = require('webpage');
var page = webPage.create();

page.onResourceRequested = function(requestData, networkRequest) {
  console.log('Request (#' + requestData.id + '): ' + JSON.stringify(requestData));
};

onResourceReceived

onResourceReceived屬性用於指定一個回調函數，當網頁收到所請求的資源時，就會執行該回調函數。它的參數就是服務器發來的HTTP迴應的元數據對象，包括如下字段。

  • id：所請求的資源編號
  • url：所請求的資源的URL r- time：包含HTTP迴應時間的Date對象
  • headers：HTTP頭信息數組
  • bodySize：解壓縮後的收到的內容大小
  • contentType：接到的內容種類
  • redirectURL：重定向URL（若是有的話）
  • stage：對於多數據塊的HTTP迴應，頭一個數據塊爲start，最後一個數據塊爲end。
  • status：HTTP狀態碼，成功時爲200。
  • statusText：HTTP狀態信息，好比OK。

若是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));
};

system模塊

system模塊能夠加載操做系統變量，system.args就是參數數組。

var page = require('webpage').create(),
    system = require('system'),
    t, address;

// 若是命令行沒有給出網址
if (system.args.length === 1) {
    console.log('Usage: page.js <some URL>');
    phantom.exit();
}

t = Date.now();
address = system.args[1];
page.open(address, function (status) {
    if (status !== 'success') {
        console.log('FAIL to load the address');
    } else {
        t = Date.now() - t;
        console.log('Loading time ' + t + ' ms');
    }
    phantom.exit();
});

使用方法以下：

$ phantomjs page.js http://www.google.com

應用

Phantomjs能夠實現多種應用。

過濾資源

處理頁面的時候，有時不但願加載某些特定資源。這時，能夠對URL進行匹配，一旦符合規則，就中斷對資源的鏈接。

page.onResourceRequested = function(requestData, request) {
  if ((/http:\/\/.+?\.css$/gi).test(requestData['url'])) {
    console.log('Skipping', requestData['url']);
    request.abort();
  }   
};

上面代碼一旦發現加載的資源是CSS文件，就會使用request.abort方法中斷鏈接。

截圖

最簡單的生成網頁截圖的方法以下。

var page = require('webpage').create();
page.open('http://google.com', function () {
    page.render('google.png');
    phantom.exit();
});

page對象表明一個網頁實例；open方法表示打開某個網址，它的第一個參數是目標網址，第二個參數是網頁載入成功後，運行的回調函數;render方法則是渲染頁面，而後以圖片格式輸出，該方法的參數就是輸出的圖片文件名。

除了簡單截圖之外，還能夠設置各類截圖參數。

var page = require('webpage').create();
page.open('http://google.com', function () {
    page.zoomFactor = 0.25;
    console.log(page.renderBase64());
    phantom.exit();
});

zoomFactor表示將截圖縮小至原圖的25%大小；renderBase64方法則是表示將截圖（PNG格式）編碼成Base64格式的字符串輸出。

下面的例子則是使用了更多參數。

// page.js

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

page.settings.userAgent = 'WebKit/534.46 Mobile/9A405 Safari/7534.48.3';
page.settings.viewportSize = { width: 400, height: 600 };

page.open('http://slashdot.org', function (status) {
	if (status !== 'success') {
    console.log('Unable to load!');
    phantom.exit();
  } else {
		var title = page.evaluate(function () {
  	  var posts = document.getElementsByClassName("article");
		  posts[0].style.backgroundColor = "#FFF";
		  return document.title;
	  });

    window.setTimeout(function () {
      page.clipRect = { top: 0, left: 0, width: 600, height: 700 };
	    page.render(title + "1.png");
	    page.clipRect = { left: 0, top: 600, width: 400, height: 600 };
      page.render(title + '2.png');
	    phantom.exit();
    }, 1000);	  
  }
});

上面代碼中的幾個屬性和方法解釋以下：

  • settings.userAgent：指定HTTP請求的userAgent頭信息，上面例子是手機瀏覽器的userAgent。
  • settings.viewportSize：指定瀏覽器窗口的大小，這裏是400x600。
  • evaluate()：用來在網頁上運行Javascript代碼。在這裏，咱們抓取第一條新聞，而後修改背景顏色，並返回該條新聞的標題。
  • clipRect：用來指定網頁截圖的大小，這裏的截圖左上角從網頁的(0. 0)座標開始，寬600像素，高700像素。若是不指定這個值，就表示對整張網頁截圖。
  • render()：根據clipRect的範圍，在當前目錄下生成以第一條新聞的名字命名的截圖。

抓取圖片

使用官方網站提供的rasterize.js，能夠抓取網絡上的圖片，將其保存在本地。

phantomjs rasterize.js http://ariya.github.com/svg/tiger.svg tiger.png

使用rasterize.js，還能夠將網頁保存爲pdf文件。

phantomjs rasterize.js 'http://en.wikipedia.org/w/index.php?title=Jakarta&printable=yes' jakarta.pdf

生成網頁

phantomjs能夠生成網頁，使用content方法指定網頁的HTML代碼。

var page = require('webpage').create();
page.viewportSize = { width: 400, height : 400 };
page.content = '<html><body><canvas id="surface"></canvas></body></html>';
phantom.exit();

官方網站有一個例子，經過創造svg圖片，而後截圖保存成png文件。

參考連接

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程