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 相关文章推荐
一段好玩的JavaScript代码
Dec 01 Javascript
关于COOKIE个数与大小的问题
Jan 17 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
Feb 23 Javascript
jquery实现的一个简单进度条效果实例
May 12 Javascript
jQuery实现的支持IE的html滑动条
Mar 16 Javascript
jquery实现简单的全选和反选功能
Jan 02 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
May 31 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
Dec 28 Javascript
Mac下安装vue
Apr 11 Javascript
Node.js中console.log()输出彩色字体的方法示例
Dec 01 Javascript
js实现点击生成随机div
Jan 16 Javascript
JS如何实现在弹出窗口中加载页面
Dec 03 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 伪造本地文件包含漏洞的代码
2011/11/03 PHP
微信获取用户地理位置信息的原理与步骤
2015/11/12 PHP
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
070823更新的一个[消息提示框]组件 兼容ie7
2007/08/29 Javascript
jQuery 浮动广告实现代码
2008/12/25 Javascript
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
jQuery 插件开发指南
2014/11/14 Javascript
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
jQuery简单创建节点的方法
2016/09/09 Javascript
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
微信小程序使用Promise简化回调
2018/02/06 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
vue+elementUI组件table实现前端分页功能
2020/11/15 Javascript
如何实现vue的tree组件
2020/12/03 Vue.js
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
Python实现的简单万年历例子分享
2014/04/25 Python
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
python能做什么 python的含义
2019/10/12 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
Python Selenium库的基本使用教程
2021/01/04 Python
CSS3制作缩略图的详细过程
2016/07/08 HTML / CSS
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
新加坡网上花店:FlowerAdvisor新加坡
2018/10/05 全球购物
数控技术应届生求职信
2013/11/13 职场文书
转党组织关系介绍信
2014/01/08 职场文书
医疗纠纷协议书
2014/04/16 职场文书
某某同志考察材料
2014/05/28 职场文书
企业务虚会发言材料
2014/10/20 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby