phantomjs

快速开始

PhantomJS是一个基于webkit的JavaScript API。它使用QtWebKit作为它核心浏览器的功能，使用webkit来编译解释执行JavaScript代码。任何你可以在基于webkit浏览器做的事情，它都能做到。它不仅是个隐形的浏览器，提供了诸如CSS选择器、支持Web标准、DOM操作、JSON、HTML5、Canvas、SVG等，同时也提供了处理文件I/O的操作，从而使你可以向操作系统读写文件等。PhantomJS的用处可谓非常广泛，诸如网络监测、网页截屏、无需浏览器的 Web 测试、页面访问自动化等。

　　PhantomJS官方地址：http://phantomjs.org/。

　　PhantomJS官方API：http://phantomjs.org/api/。

　　PhantomJS官方示例：http://phantomjs.org/examples/。

　　PhantomJS GitHub：https://github.com/ariya/phantomjs/。

Hello, World!

创建一个包含以下两行的新文本文件：

console.log('Hello, world!');
phantom.exit();

将其另存为hello.js，然后从命令行运行它。
从命令提示符键入：

phantomjs hello.js

输出为：

Hello, world!

在第一行，console.log将传递的字符串打印到终端。在第二行，phantom.exit终止执行。
在脚本中调用phantom.exit这是非常重要的,否则PhantomJS将不会被终止。

页面加载

可以通过创建网页对象来加载，分析和呈现网页。
以下脚本演示页面对象的最简单的使用。它加载www.baidu.com，然后将其作为图像保存example.png在脚本运行的同一目录中。

var page = require('webpage').create();
page.open('http://example.com', function(status) {
  console.log("Status: " + status);
  if(status === "success") {
    page.render('example.png');
  }
  phantom.exit();
});

在运行的JS同目录下，将生成example.png文件
由于其渲染功能，PhantomJS可用于捕获网页，基本上是截取内容的截图。

以下loadspeed.js脚本加载指定的URL（不要忘记添加http协议），并测量加载它所需的时间。

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

if (system.args.length === 1) {
  console.log('Usage: loadspeed.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 ' + system.args[1]);
    console.log('Loading time ' + t + ' msec');
  }
  phantom.exit();
});

使用以下命令运行脚本：

phantomjs loadspeed.js http://www.baidu.com

它输出如下：

Loading http://www.baidu.com
Loading time 11954 msec

代码评估

要在网页的上下文中评估JavaScript代码，请使用evaluate()函数。执行是“沙盒”，代码无法访问其自己的页面上下文之外的任何JavaScript对象和变量。可以从中返回一个对象evaluate()，但它只限于简单的对象，不能包含函数或闭包。
以下是一个示例来显示网页的标题，在命令行运行phantomjs test.js：

phantom.outputEncoding="gbk";
var page = require('webpage').create();
page.open('http://www.baidu.com', function(status) {
  var title = page.evaluate(function() {
    return document.title;
  });
  console.log('页面标题是: ' + title);
  phantom.exit();
});

它输出如下：

页面标题是:百度一下，你就知道

evaluate()默认情况下，不会显示来自网页的任何控制台消息（包括内部代码）。要覆盖此行为，请使用onConsoleMessage回调。前面的例子可以重写为：

phantom.outputEncoding="gbk";
var page = require('webpage').create();
page.onConsoleMessage = function(msg) {
  console.log('控制台输出: ' + msg);
};
page.open('http://www.baidu.com', function(status) {
  page.evaluate(function() {
    console.log('页面标题: '+document.title);
  });
  phantom.exit();
});

它输出如下：

控制台输出: 一张网页，要经历怎样的过程，才能抵达用户面前？
一位新人，要经历怎样的成长，才能站在技术之巅？
探寻这里的秘密；
体验这里的挑战；
成为这里的主人；
加入百度，加入网页搜索，你，可以影响世界。

控制台输出: 请将简历发送至 %c ps_recruiter@baidu.com（ 邮件标题请以“姓名-应聘XX职位-来自console”命名） color:red
控制台输出: 职位介绍：http://dwz.cn/hr2013
控制台输出: 页面标题: 百度一下，你就知道

网络请求和响应

当脚本从远程服务器请求资源时，请求和响应都可以通过onResourceRequested和onResourceReceived回调进行跟踪。这在示例netlog.js中有所展示：

var page = require('webpage').create();
page.onResourceRequested = function(request) {
  console.log('请求 ' + JSON.stringify(request, undefined, 4));
};
page.onResourceReceived = function(response) {
  console.log('接收 ' + JSON.stringify(response, undefined, 4));
};
page.open('http://www.baidu.com');
phantom.exit();

它输出如下：

请求 {
    "headers": [
        {
            "name": "Accept",
            "value": "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8"
        },
        {
            "name": "User-Agent",
            "value": "Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/538.1 (KHTML, like Gecko) PhantomJS/2.1.1 Safari/5
38.1"
        }
    ],
    "id": 1,
    "method": "GET",
    "time": "2017-11-01T07:32:25.793Z",
    "url": "http://www.baidu.com/"
}
接收 {
    "contentType": null,
    "headers": [],
    "id": 1,
    "redirectURL": null,
    "stage": "end",
    "status": null,
    "statusText": null,
    "time": "2017-11-01T07:32:25.928Z",
    "url": "http://www.baidu.com/"
}

屏幕捕获

由于PhantomJS正在使用WebKit，一个真正的布局和渲染引擎，它可以捕获一个网页作为屏幕截图。因为PhantomJS可以在网页上呈现任何东西，所以它可以用于转换HTML格式的CSS，而且还可以使用SVG，图像和Canvas元素。

以下脚本演示了页面捕获的最简单的使用。它加载baidu主页，然后将其保存为图像baidu.png。

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

要运行此示例，请创建一个名为的新文件baidu.js。将上述代码复制并粘贴到baidu.js文件中。在命令行中，使用PhantomJS运行此新创建的脚本：

phantomjs baidu.js

运行后，在baidu.js同目录下会生成图片文件：

除了PNG格式，PhantomJS支持JPEG，GIF和PDF。

为了演示了PhantomJS的更完整的渲染功能，我们找到phantomjs解压examples目录下脚本rasterize.js，命令行输入：

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

运行后，在examples目录下会生成图片文件：

另一个例子是极地时钟，类似地我们运行一下：

phantomjs rasterize.js https://dmitrybaranovskiy.github.io/raphael/polar-clock.html clock.png

生成PDF输出也很简单，例如从百度百科的文章：

phantomjs rasterize.js https://baike.baidu.com/item/Python/407313 baike.pdf

我们可以使用页面的属性更改屏幕截图和网页的大小：

var page = require('webpage').create();
//viewportSize being the actual size of the headless browser
page.viewportSize = { width: 1024, height: 768 };
//the clipRect is the portion of the page you are taking a screenshot of
page.clipRect = { top: 0, left: 0, width: 1024, height: 768 };
//the rest of the code is the same as the previous example
page.open('http://www.baidu.com', function(status) {
	if (status !== 'success') {
		console.log('Unable to load the address!');
		phantom.exit(1);
	}
	else {
		window.setTimeout(function () {
			page.render('baidu1.png');
			phantom.exit();
		}, 200);
    }
});

Canvas 可以轻松构建并转换为图像。用example所包含colorwheel.js产生以下色轮：