概述
有时,我们需要浏览器处理网页,但并不需要浏览,比如生成网页的截图、抓取网页数据等操作。PhantomJS的功能,就是提供一个浏览器环境的命令行接口,你可以把它看作一个“虚拟浏览器”,除了不能浏览,其他与正常浏览器一样。它的内核是WebKit引擎,不提供图形界面,只能在命令行下使用,我们可以用它完成一些特殊的用途。
安装
PhantomJS是二进制程序,需要安装后使用。
$ npm install phantomjs -g
使用下面的命令,查看是否安装成功。
$ phantomjs --version
REPL环境
phantomjs提供了一个完整的REPL环境,允许用户通过命令行与PhantomJS互动。键入phantomjs,就进入了该环境。
$ phantomjs
这时会跳出一个phantom提示符,就可以输入Javascript命令了。
phantomjs> 1+2 3 phantomjs> function add(a,b) { return a+b; } undefined phantomjs> add(1,2) 3
webpage模块
webpage模块是PhantomJS的核心模块,用于网页操作。
var webPage = require('webpage'); var page = webPage.create();
上面代码表示加载PhantomJS的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
viewportSize属性指定浏览器视口的大小,即网页加载的初始浏览器窗口大小。
var webPage = require('webpage'); var page = webPage.create(); page.viewportSize = { width: 480, height: 800 };
viewportSize的Height字段必须指定,不可省略。
zoomFactor
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 = 大专栏