PhantomJS
PhantomJS是一个无界面的浏览器，实现了传统浏览器的所有功能，除了没有界面，因此，这是一个隐身浏览器。
- ，特别需要注意的是
Web Page Module中的内容
根据官网的解释，PhantomJS用于网站测试(
HEADLESS WEBSITE TESTING)、屏幕截屏(SCREEN CAPTURE)、页面自动化(PAGE AUTOMATION)以及网络监控(NETWORK MONITORING)。下载及安装
我只是进行了简单的学习，因此，没有把软件配置到环境变量中
在官网中对应系统的压缩包。
下面是我的安装过程：
- 解压zip包
/Users/negivup/phantomjs - 在命令行中输入
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百度一下，你就知道
屏幕截屏
- 屏幕截图对应的文档地址：
- 截屏使用的是
render函数，地址：
简单截屏
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()}) 这种方式实现的效果和上面的实现效果相同。
触发事件
有待补充
网络监听
网络监听就是绑定两个事件：onResourceRequested和onResourceReceived.
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()}) 上面的内容只能算是一个入门，以后尽量多研究一下。