PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)


Posted in Javascript onAugust 06, 2015

PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API。它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG。 PhantomJS 可以用于 页面自动化 , 网络监测 , 网页截屏 ,以及 无界面测试 等。

PhantomJs官网:http://phantomjs.org/
GitHub:https://github.com/ariya/phantomjs/wiki/Quick-Start

一、安装

安装包下载地址:http://phantomjs.org/download.html ,包括 Windows ,Mac OS,Linux版本,自行选择对应 版本下载解压即可( 为方便使用,可自已为phantomjs设置环境变量 ),其中带有一个example文件夹,里面有很多已经写好的代码供使用。本文假设phantomjs已经安装好并已设置了环境变量。

二、使用

Hello, World!

新建一个包含下面两行脚本的文本文件:

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

将文件另存为 hello.js ,然后执行它:

phantomjs hello.js

输出结果为:Hello, world!

第一行将会在终端打印出字符串,第二行 phantom.exit 将退出运行。
在该脚本中调用 phantom.exit 是非常重要的,否则 PhantomJS 将根本不会停止。

脚本参数 ? Script Arguments

Phantomjs如何传递参数呢?如下所示 :

phantomjs examples/arguments.js foo bar baz

其中的foo, bar, baz就是要传递的参数,如何获取呢:

var system = require('system');
if (system.args.length === 1) {
 console.log('Try to pass some args when invoking this script!');
} else {
 system.args.forEach(function (arg, i) {
   console.log(i + ': ' + arg);
 });
}
phantom.exit();

它将输出 :

0: foo
1: bar
2: baz

页面加载 ? Page Loading

通过创建一个网页对象,一个网页可以被加载,分析和渲染。

下面的脚本将示例页面对象最简单的用法,它加载 example.com 并且将它保存为一张图片, example.png 。

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

由于它的这个特性,PhantomJS 可以用来 网页截屏 ,截取一些内容的快照,比如将网页、SVG存成图片,PDF等,这个功能很牛X。

接下来的 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 time ' + t + ' msec');
 }
 phantom.exit();
});

在命令行运行该脚本:

phantomjs loadspeed.js http://www.google.com
它输出像下面的东西:

Loading http://www.google.com Loading time 719 msec

代码运算 ? Code Evaluation

要想在网页的上下文中对JavaScript 或 CoffeeScript 进行运算,使用 evaluate() 方法。代码是在“沙箱”中运行的,它没有办法读取在其所属页面上下文之外的任何JavaScript对象和变量。 evaluate() 会返回一个对象,然而它仅限制于简单的对象并且不能包含方法或闭包。

这有一个示例来显示网页标题:

var page = require('webpage').create();
page.open(url, function (status) {
 var title = page.evaluate(function () {
  return document.title;
 });
 console.log('Page title is ' + title);
});

任何来自于网页并且包括来自 evaluate() 内部代码的控制台信息,默认不会显示的。要重写这个行为,使用 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);
 });
});

DOM操作 ? DOM Manipulation

由于脚本好像是一个Web浏览器上运行的一样,标准的DOM脚本和CSS选择器可以很好的工作。这使得PhantomJS适合支持各种 页面自动化任务 。

下面的 useragent.js 将读取 id 为myagent的元素的 textContent 属性:

var page = require('webpage').create();
console.log('The default user agent is ' + page.settings.userAgent);
page.settings.userAgent = 'SpecialAgent';
page.open('http://www.httpuseragent.org', function (status) {
 if (status !== 'success') {
  console.log('Unable to access network');
 } else {
  var ua = page.evaluate(function () {
   return document.getElementById('myagent').textContent;
  });
  console.log(ua);
 }
 phantom.exit();
});

上面示例同样提供了一种自定义 user agent 的方法。

使用JQuery及其他类库:

var page = require('webpage').create();
page.open('http://www.sample.com', function() {
 page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() {
  page.evaluate(function() {
   $("button").click();
  });
  phantom.exit()
 });
});

网络请求及响应 ? Network Requests and Responses

将一个页面从一台远程服务器请求一个资源的时候,请求和响应均可以通过 onResourceRequested 和 onResourceReceived 回调方法追踪到。示例 netlog.js :

var page = require('webpage').create();
page.onResourceRequested = function (request) {
 console.log('Request ' + JSON.stringify(request, undefined, 4));
};
page.onResourceReceived = function (response) {
 console.log('Receive ' + JSON.stringify(response, undefined, 4));
};
page.open(url);

获取如何把该特性用于HAR 输出以及基于YSlow的性能分析的更多信息,请参阅 网络监控页面 。

Javascript 相关文章推荐
[IE&amp;FireFox兼容]JS对select操作
Jan 07 Javascript
JavaScript随机排序(随即出牌)
Sep 17 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
详解javascript实现自定义事件
Jan 19 Javascript
老生常谈遮罩层 滚动条的问题
Apr 29 Javascript
浅谈js中调用函数时加不加括号的问题
Jul 28 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 Javascript
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
超简单的微信小程序轮播图
Nov 22 Javascript
JavaScript适配器模式原理与用法实例详解
Mar 09 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 Javascript
jQuery实现hover合成事件的方法
Aug 06 #Javascript
Ajax清除浏览器js、css、图片缓存的方法
Aug 06 #Javascript
jQuery实现动画效果circle实例
Aug 06 #Javascript
jQuery动态星级评分效果实现方法
Aug 06 #Javascript
javascript使用输出语句实现网页特效代码
Aug 06 #Javascript
JS实现霓虹灯文字效果的方法
Aug 06 #Javascript
javascript实现网页背景烟花效果的方法
Aug 06 #Javascript
You might like
php 删除一个数组中的某个值.兼容多维数组!
2012/02/18 PHP
PHP操作MongoDB GridFS 存储文件的详解
2013/06/20 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
PHP 类与构造函数解析
2017/02/06 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
利用JS判断鼠标移入元素的方向
2016/12/11 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
浅谈函数调用的不同方式,以及this的指向
2017/09/17 Javascript
微信小程序动画(Animation)的实现及执行步骤
2018/10/28 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
vue组件系列之TagsInput详解
2020/05/14 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
Python书单 不将就
2017/07/11 Python
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
Python获取、格式化当前时间日期的方法
2020/02/10 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
抗震救灾标语
2014/06/26 职场文书
工作说明书格式
2014/07/29 职场文书
党旗在我心中演讲稿
2014/09/15 职场文书
2014年职称评定工作总结
2014/11/26 职场文书
2015年个人现实表现材料
2014/12/10 职场文书
2019 入党申请书范文
2019/07/10 职场文书
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python
python Tkinter模块使用方法详解
2022/04/07 Python