PhantomJS 入门(一)

Urna Semper
陆启东
2015年6月21日


PhantomJS 入门
PhantomJS is a headless WebKit with JavaScript API.


     我想我不需要说服你测试你的javascript代码是一个好习惯,但是有时候在dom里面测试你得javascript实在很乏味,也就是说你必须在浏览器里面测试你得代码而非命终端里面。这样真的对么?显然不对,请看这里PhantomJS


     那么PhantomJS到底是什么呢?这里我们引用下官网的一句话
PhantomJS is a headless WebKit with JavaScript API.
    你懂的,Webkit是Chrome,Safari和一些小众浏览器的引擎,所以说PhantomJS是一个浏览器但是又不是浏览器,也就是说通过它可以实现一个也没一个网页但是你并不需要打开它,或者这个让你听起来很困扰,所以你只要记住它类似于一个浏览器但是在控制台中使用就行了,哦了那我们来简单看下一个例子,当然首先你需要安装好PhantomJS。
     安装PhantomJS
     安装PhantomJS这实在是太简单了,只需要吧程序下载下来放到你的控制台环境变量路径里面,下载页面是PhantomJS download page。进去选择你当前系统的包,然后把文件复制到你得控制台系统路径里面。
     如果你是Mac OS X的话那更简单啦,直接运行:
    brew update && brew install phantomjs
     查看你是否已经安装好了PhantomJS
    phantomjs --version


简单的例子

    让我们来看一个简单的例子

    simple.js

console.log("we can log stuff out.");
 
function add(a, b) {
    return a + b;
}
 
conslole.log("We can execute regular JS too:", add(1, 2));
 
phantom.exit();


我们来用下面的命名来运行它

phantomjs simple.js

运行结果

我们在控制台看到了两行输出。当然这个非常简单,但是它反映出一点:PhantomJS可以像一个浏览器那也处理javascript,然而这段代码并没有PhantomJS-specific 代码,但是看最后一行,这个很重要,因为所有的phantomjs执行完之后都要退出,比如我们想再关闭里面写个回调。


加载页面

phantomjs可以帮助我们打开一个页面,并且执行javascript。

例如: script.js

var page = require('webpage').create();
 
page.open('http://www.ly.com', function (s) {
    console.log(s);
    phantom.exit();
});


这里我们利用webpage模块来创建一个webpage对象,然后使用open的方法打开它,里面有2个参数第一个是url,然后就是回调函数,回调函数里面,里面可以输出返回的状态,如上代码执行之后我们在控制台里面看到的应该是"success"。

    让我们来做些更有趣的事情,我们打开页面然后执行一段脚本看看:

page.open('http://www.ly.com', function () {
    var title = page.evaluate(function () {
        var posts = document.getElementsByClassName("logo");
        posts[0].style.backgroundColor = "#000000";
        return document.title;
    });
    page.clipRect = { top: 0, left: 0, width: 600, height: 700 };

    page.render(title + ".png");

  未完待续


无标签
分享到: