PhantomJS无头浏览器 v2.1.1 绿色免费版 xx

PhantomJS是一款非常强大的WebKit浏览引擎。PhantomJS引擎没有界面，用户可以对它进行脚本编程，可支持多种web标准，包括DOM操作，CSS选择器，JSON，Canvas以及SVG，解压到任意目录，并将包含phantomjs.exe的目录添加到系统路径。

【功能介绍】

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

【安装方法】

下载完成后解压文件，建议为方便使用，单独放在一个文件夹里，如我放在D:\workspace\phantomjs里。  
到这里，你已经成功下载安装好PhantomJS了。那么，打开D:\workspace\phantomjs\bin文件夹，双击运行phantomjs.exe，出现如下界面，那么你就可以运行JS代码了。  

由于我们都比较懒，不喜欢为了运行一个程序总是跑到D:\workspace\phantomjs\bin文件夹打开phantomjs.exe。那么，你可以将phantomjs.exe添加到环境变量里。具体如下：打开我的电脑->右键属性->高级系统设置->高级标签->环境变量，在系统变量里找到Path,将你的phantomjs添加到环境变量里。比方说我的路径添加的为“;D:\workspace\phantomjs\bin”，切记不要少了前面那个分号。

【使用方法】

开始我们的第一个PhantomJS程序了。打开你的工作目录，新建文件hello.js，敲入以下代码，Ctrl+S保存：

1 // a phantomjs example
2 var page = require('webpage').create();
3 phantom.outputEncoding="gbk";
4 page.open("http://www.cnblogs.com/front-Thinking", function(status) {
5 if ( status === "success" ) {
6 console.log(page.title);
7 } else {
8 console.log("Page failed to load.");
9 }
10 phantom.exit(0);
11 });

然后，打开CMD命令行工具，切换到你的当前目录，敲入phantomjs hello.js，结果如下：


如果你的结果跟我的一样，那么恭喜你，你已经成功跑起来属于你的第一个PhantomJS程序了。那么我们简要介绍下上面的代码：第2行，webpage是phantomjs的核心模块之一，它给用户提供了访问、操作、选择web文档的接口。第3行，设置下编码格式，否则输出的可能是乱码。第4行，运行page.open函数，其中第一个参数是你要访问的url，第二个参数是一个回调函数。在回调函数里我们检查了下返回的状态，如果是success那么我们就将浏览的url制定文档的title打印出来，如你所见，如果不是那么打印文档加载出错。最后一行退出phantomjs执行环境。

【配置功能】

webpage：如你所见，上面的例子我们已经见识了它的威力了。它的作用主要是提供了一套可以访问和操作web文档的核心方法，包括操作DOM、事件捕获、用户事件模拟等等。
system：该模块提供了一些与操作系统相关的接口，例如访问操作系统信息、访问系统环境变量、接受命令行参数等等与程序执行相关的系统信息。
fs：即FileSystem。熟悉NodeJS的朋友都知道，NodeJS也内建了相关的核心模块。fs提供了执行文件I/O操作的标准接口，如读写文件、删除文件等。它使得你持久化一些文件（如logfile等）变得非常容易。
webserver：如其名字一样，你可以基于它来实现自己的webserver，用来处理请求并且执行PhantomJS代码等。

其它一些配置信息，执行PhantomJS的命令格式如下：
1 phantomjs [switches] [options] [script] [argument [argument [...]]]
其中，各种参数都是可选的。例如我们第一个程序的执行命令如下：
1 phantomjs hello.js
打开debug模式（该模式用于开发，可提供必要提示信息）：
1 phantomjs --debug=yes hello.js
设置cookie路径：
1 phantomjs --cookie-file=cookie.txt hello.js

【使用技巧】

怎么选择并操作DOM元素？

DOM选择器，常用的getElementById、getElementByClassName、getElementByName、getElementByTagName、querySelector（CSS选择器）。

我们看一个使用querySelector的例子：
1 var content = page.evaluate(function () {
2 var element = document.querySelector('#elem');
3     return element.textContent;
4 });
5 console.log(content);

evaluate函数是个新东西，其实很简单，就是在webpage环境下执行evaluate传入的回调函数，在这里面执行与phantom相关的操作可以避免web页面刺探phantom相关的设置信息。上面的代码就比较简单了，不啰嗦了。
模仿用户点击事件：
phantomJS提供了两种模仿点击事件的接口，一个是sendEvent，phantomJS事件触发器；一个是DOM事件触发器。

我们先看看第一个，语法如下：
1 sendEvent( eventType, Point X, Point Y, button='left' )
2 eventType: mouseup  mousedown mousemove click doubleclick
3 Point X : 触发事件的X坐标
4 Point Y: 触发事件的Y坐标

第二个，我们都应该比较熟悉了：
1 var evt = document.createEvent("MouseEvents");
2 evt.initMouseEvent(
3     "click", // 事件类型
4     true,
5     true,
6     window,
7     1,
8     1, 1, 1, 1, // 事件的坐标
9     false, // Ctrl键标识
10     false, // Alt键标识
11     false, // Shift键标识
12     false, // Meta键标识
13     0, // Mouse左键
14     element); // 目标元素
15 element.dispatchEvent(evt);

【常见问题】