摘要：是一個(gè)無界面的瀏覽器，實(shí)現(xiàn)了傳統(tǒng)瀏覽器的所有功能，除了沒有界面，因此，這是一個(gè)隱身瀏覽器。觸發(fā)事件有待補(bǔ)充網(wǎng)絡(luò)監(jiān)聽網(wǎng)絡(luò)監(jiān)聽就是綁定兩個(gè)事件和請(qǐng)求的內(nèi)容這是請(qǐng)求。。。響應(yīng)的內(nèi)容這是響應(yīng)。。。

PhantomJS是一個(gè)無界面的瀏覽器，實(shí)現(xiàn)了傳統(tǒng)瀏覽器的所有功能，除了沒有界面，因此，這是一個(gè)隱身瀏覽器。

PhantomJS官網(wǎng)

API，特別需要注意的是Web Page Module中的內(nèi)容

根據(jù)官網(wǎng)的解釋，PhantomJS用于網(wǎng)站測試(
HEADLESS WEBSITE TESTING)、屏幕截屏(SCREEN CAPTURE)、頁面自動(dòng)化(PAGE AUTOMATION)以及網(wǎng)絡(luò)監(jiān)控(NETWORK MONITORING)。

我只是進(jìn)行了簡單的學(xué)習(xí)，因此，沒有把軟件配置到環(huán)境變量中

在官網(wǎng)中下載對(duì)應(yīng)系統(tǒng)的壓縮包。

下面是我的安裝過程：

下載壓縮包

解壓zip包/Users/negivup/phantomjs

在命令行中輸入export PATH="$PATH:/Users/negivup/phantomjs/bin"

如果要配置永久的環(huán)境變量，這個(gè)要自行百度了，我試了，但是沒有成功，汗。。。

學(xué)習(xí)程序的第一步就是HelloWorld，這個(gè)也不例外，下面咱們寫第一個(gè)例子。

var page = require("webpage").create() // webpage是一個(gè)核心模塊

/**
 * page.open 一個(gè)常用的方法
 * 第一個(gè)參數(shù)是地址，第二個(gè)參數(shù)是回調(diào)
 */
page.open("http://www.baidu.com", function (status) {
  console.log("Status: " + status)
  if (status === "success") {
    console.log(page.title)
  } else {
    console.log("fail to load")
  }
  phantom.exit() // 如果沒有這句代碼，PhantomJS 就會(huì)一直不退出
})

特別需要注意的是，phantom.exit一定要存在，不然 PhantomJS 就會(huì)一直不退出

保存名字為：hello.js

命令行執(zhí)行(下面的例子也都是這種執(zhí)行方式)：

$ phantomjs hello.js

執(zhí)行的結(jié)果：

Status: success
百度一下，你就知道

屏幕截圖對(duì)應(yīng)的文檔地址：http://phantomjs.org/screen-capture.html

截屏使用的是render函數(shù)，地址：http://phantomjs.org/api/webpage/method/render.html

var url = "http://example.com/"
var page = require("webpage").create()

page.open(url, function (status) {
  if (status === "success") {
    page.render("example.png") // 保存截圖
  } else {
    console.log("fail to load")
  }
  phantom.exit()
})

截圖保存的位置就是js文件所在的位置。

如果要截圖的尺寸是手機(jī)的尺寸怎么辦？這個(gè)簡單，只需要設(shè)置page.viewportSize即可。

var url = "http://example.com/"
var page = require("webpage").create()

page.viewportSize = { // 設(shè)置尺寸為iPhone6的尺寸
  width: 375,
  height: 667
}

page.open(url, function (status) {
  if (status === "success") {
    page.render("example.png") // 保存截圖
  } else {
    console.log("fail to load")
  }
  phantom.exit()
})

現(xiàn)在我只需要截取的部分是30*30，該怎么解決呢？看下面的代碼。

var url = "http://example.com/"
var page = require("webpage").create()

page.viewportSize = {
  width: 375,
  height: 667
}

page.clipRect = { // 設(shè)置截圖的實(shí)際尺寸
  top: 0,
  left: 0,
  width: 30,
  height: 30
}

page.open(url, function (status) {
  if (status === "success") {
    page.render("example.png") // 保存截圖
  } else {
    console.log("fail to load")
  }
  phantom.exit()
})

這樣，截圖的簡單使用就結(jié)束了。

頁面自動(dòng)化，其實(shí)就是通過自己寫的程序操作頁面的DOM。

文檔地址

接口地址

在Phantomjs中，可以使用所有JavaScript中的選擇器。

var url = "http://example.com/"
var page = require("webpage").create()

page.open(url, function (status) {
  if (status === "success") {
    var content = page.evaluate(function () {
      var ele = document.querySelector("h1")
      return ele // 返回當(dāng)前的DOM對(duì)象
    })
    console.log(content.innerHTML) // 打印輸出內(nèi)容
  } else {
    console.log("fail to load")
  }
  phantom.exit()
})

上面的代碼是不是有點(diǎn)不爽，在page.evaluate中直接使用console.log根本打印不出來內(nèi)容，難道內(nèi)容無法在page.evaluate中正常獲取嗎？如果不使用return，能不能獲取內(nèi)容呢？答案是肯定的。

上面代碼的優(yōu)化：onConsoleMessage通過這個(gè)事件就可以實(shí)現(xiàn)直接打印輸出的內(nèi)容：

var url = "http://example.com/"
var page = require("webpage").create()

page.onConsoleMessage = function (msg) {
  console.log(msg)
}

page.open(url, function (status) {
  if (status === "success") {
    var content = page.evaluate(function () {
      var ele = document.querySelector("h1")
      console.log(ele.innerHTML)
    })
  } else {
    console.log("fail to load")
  }
  phantom.exit()
})

這種方式實(shí)現(xiàn)的效果和上面的實(shí)現(xiàn)效果相同。

有待補(bǔ)充

網(wǎng)絡(luò)監(jiān)聽就是綁定兩個(gè)事件：onResourceRequested和onResourceReceived.

var url = "http://example.com/"
var page = require("webpage").create()

page.onResourceRequested = function (request) { // 請(qǐng)求的內(nèi)容
  console.log("這是請(qǐng)求。。。")
}

page.onResourceReceived = function (response) { // 響應(yīng)的內(nèi)容
  console.log("這是響應(yīng)。。。")
}

page.open(url, function (status) {
  if (status === "success") {
    console.log(document.title)
  } else {
    console.log("fail to load")
  }
  phantom.exit()
})

上面的內(nèi)容只能算是一個(gè)入門，以后盡量多研究一下。