PhantomJS,隐身浏览器

PhantomJS

PhantomJS是一个无界面的浏览器,实现了传统浏览器的所有功能,除了没有界面,因此,这是一个隐身浏览器。

  • PhantomJS官网
  • API,特别需要注意的是Web Page Module中的内容

根据官网的解释,PhantomJS用于网站测试(
HEADLESS WEBSITE TESTING)、屏幕截屏(SCREEN CAPTURE)、页面自动化(PAGE AUTOMATION)以及网络监控(NETWORK MONITORING)。

下载及安装

我只是进行了简单的学习,因此,没有把软件配置到环境变量中

在官网中下载对应系统的压缩包。

下面是我的安装过程:

  1. 下载压缩包
  2. 解压zip包/Users/negivup/phantomjs
  3. 在命令行中输入export PATH="$PATH:/Users/negivup/phantomjs/bin"

如果要配置永久的环境变量,这个要自行百度了,我试了,但是没有成功,汗。。。

HelloWorld

学习程序的第一步就是HelloWorld,这个也不例外,下面咱们写第一个例子。

var page = require('webpage').create() // webpage是一个核心模块

/**
 * page.open 一个常用的方法
 * 第一个参数是地址,第二个参数是回调
 */
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 就会一直不退出
})

特别需要注意的是,phantom.exit一定要存在,不然 PhantomJS 就会一直不退出

保存名字为:hello.js

命令行执行(下面的例子也都是这种执行方式):

$ phantomjs hello.js

执行的结果:

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

屏幕截屏

  • 屏幕截图对应的文档地址:http://phantomjs.org/screen-capture.html
  • 截屏使用的是render函数,地址: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文件所在的位置。

指定页面的宽度和高度

如果要截图的尺寸是手机的尺寸怎么办?这个简单,只需要设置page.viewportSize即可。

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

page.viewportSize = { // 设置尺寸为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()
})

截取页面的某部分内容

现在我只需要截取的部分是30*30,该怎么解决呢?看下面的代码。

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

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

page.clipRect = { // 设置截图的实际尺寸
  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()
})

这样,截图的简单使用就结束了。

页面自动化

页面自动化,其实就是通过自己写的程序操作页面的DOM。

  • 文档地址
  • 接口地址

简单的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 // 返回当前的DOM对象
    })
    console.log(content.innerHTML) // 打印输出内容
  } else {
    console.log('fail to load')
  }
  phantom.exit()
})

上面的代码是不是有点不爽,在page.evaluate中直接使用console.log根本打印不出来内容,难道内容无法在page.evaluate中正常获取吗?如果不使用return,能不能获取内容呢?答案是肯定的。

上面代码的优化:onConsoleMessage通过这个事件就可以实现直接打印输出的内容:

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()
})

这种方式实现的效果和上面的实现效果相同。

触发事件

有待补充

网络监听

网络监听就是绑定两个事件:onResourceRequestedonResourceReceived.

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

page.onResourceRequested = function (request) { // 请求的内容
  console.log('这是请求。。。')
}

page.onResourceReceived = function (response) { // 响应的内容
  console.log('这是响应。。。')
}

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

上面的内容只能算是一个入门,以后尽量多研究一下。

你可能感兴趣的:(phantomjs,html5,javascript)