PhantomJS快速入门
分类:www.1145.com

正文简介了PhantomJS的连锁底工知识点,首要不外乎PhantomJS的牵线、下载与安装、HelloWorld程序、核心模块介绍等。由于鄙人吴下阿蒙,难免有脱漏之处,迎接指正沟通。

  1、PhantomJS是什么?


  PhantomJS是贰个基于webkit的JavaScript API。它利用QtWebKit作为它基本浏览器的法力,使用webkit来编写翻译解释施行JavaScript代码。任何你能够在依据webkit浏览器做的事情,它都能成就。它不止是个藏匿的浏览器,提供了举个例子CSS选取器、协理Web规范、DOM操作、JSON、HTML5、Canvas、SVG等,同时也提供了管理公事I/O的操作,进而令你能够向操作系统读写文件等。PhantomJS的用场可谓十二分普遍,诸如互联网监测、网页截屏、不须求浏览器的 Web 测验、页面访问自动化等。

  PhantomJS官方地址:

  PhantomJS官方API:

  PhantomJS官方示例:

  PhantomJS GitHub:

  2、PhantomJS下载与安装


  官方下载地址: OSLinux那三大主流的遭受。你能够遵照你的运营条件选用要下载的包,作者的运作情形是Windows7。

  下载完结后解压文件,提议为方便使用,单独放在贰个文件夹里,如作者放在D:workspacephantomjs里。

  到此地,你早已成功下载安装好PhantomJS了。那么,打开D:workspacephantomjsbin文件夹,双击运营phantomjs.exe,现身如下分界面,那么您就足以运作JS代码了。

图片 1

  由于大家都比较懒,不希罕为了运维八个主次连接跑到D:workspacephantomjsbin文件夹展开phantomjs.exe。那么,你能够将phantomjs.exe增添到蒙受变量里。具体如下:张开自个儿的计算机->右键属性->高等系统安装->高档标签->景况变量,在系统变量里找到Path,将您的phantomjs增添到遭受变量里。比如说小编的门路增添的为“;D:workspacephantomjsbin”,切记不要少了眼前这一个分号。

  3、第一个PhantomJS小程序HelloWorld


 

  好了,到这两天甘休,能够初阶大家的首先个PhantomJS程序了。张开你的做事目录,新建文件hello.js,敲入以下代码,Ctrl+S保存:

图片 2

 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 });

图片 3

  然后,张开CMD命令行工具,切换来您的当前目录,敲入phantomjs hello.js,结果如下:

图片 4

  假设你的结果跟自家的相近,那么恭喜你,你早就打响跑起来归于您的率先个PhantomJS程序了。那么我们大约介绍下方面包车型客车代码:第2行,webpage是phantomjs的着力模块之生机勃勃,它给顾客提供了拜候、操作、选拔web文书档案的接口。第3行,设置下编码格式,不然输出的或是是乱码。第4行,运转page.open函数,在那之中第二个参数是您要拜会的url,第三个参数是八个回调函数。在回调函数里我们检查了下重返的动静,借使是success那么大家就将浏览的url制订文书档案的title打字与印刷出来,如您所见,即便不是那么打字与印刷文书档案加载出错。最后风姿洒脱行退出phantomjs推行情状。

  4、PhantomJS核心API


  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

  5、操作page content


  在helloworld中大家曾经学会了怎么访问多个url并抽取它的title。上面我们看看哪些选取并操作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提供了二种模拟点击事件的接口,三个是send伊芙nt,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坐标

  第贰个,大家都应该相比较熟稔了:

图片 5

 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);

图片 6

  6、事件管理


  在真的的浏览器里,任何事件时有发生都可以预知,而在PhantomJS里都以不可以预知的。在PhantomJS里,大家得以捕获那个事件并做出相应管理。由于涉及到的平地风波有成都百货上千种,那么大家后天只是把一个比较实惠的风云作为例子,基于这几个事件你能够监察和控制多少个页面并做出深入分析:

1 var startTime = null;
2 page.onLoadStarted = function() {
3     startTime = new Date().getTime();
4 }

  监听也没开头加载事件,获取开端加载时间;

图片 7

1 var resources = [];
2 page.onResourceRequested = function (request) {
3     resource = {
4         "startTime": request.time,
5         "url": request.url
6     };
7     resources[request.id] = resource;
8 };

监听资源文件请求事件,获取资源发起请求的时间;

图片 8

图片 9

1 page.onResourceReceived = function (response) {
2     if(response.stage == "start") {
3         resources[response.id].size = response.bodySize;
4     } else if(response.stage == "end") {
5         resources[response.id].endTime = response.time;
6     }
7 };

监听资源文件加载完成事件,获取加载完成时间;

图片 10

图片 11

 1 page.onLoadFinished = function () {
 2     endTime = new Date();
 3     timeInSeconds = (endTime - startTime) / 1000;
 4     console.log("Loading takes " + timeInSeconds + " seconds.");
 5     resources.forEach(function (resource) {
 6         st = new Date(resource.startTime).getTime();
 7         et = new Date(resource.endTime).getTime();
 8         timeSpent = (et - st) / 1000;
 9         console.log(timeSpent + " seconds : " + resource.url);
10     });
11     phantom.exit(0);
12 };
监听文档加载完成事件,记录完成时间,并打印出所有资源文件的耗时。

图片 12

  上边包车型地铁on+事件,做了四件事,监听财富文件须要和加载成功事件,监听文书档案加载初始产生事件,获取相应的时光,那样我们就能够行使这一个事件去解析那么些页面包车型地铁特性难题了。

  7、抓取页面


  将在访谈的页面抓取保存为图片或然PDF文件的格式,那在PhantomJS里特别轻松。我们下边就分别做一个保留图片和PDF的例证:

  保存为图片:

图片 13

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

图片 14

  注:render获取一个参数,即保存文件的文书名。结果如下:

图片 15

  保存为pdf:

图片 16

 1 // a phantomjs example,saved as pdf file
 2 var page = require('webpage').create();
 3 page.open("http://www.baidu.com", function(status) {
 4    if ( status === "success" ) {
 5       console.log(page.title); 
 6       page.paperSize = { format: 'A4', 
 7             orientation: 'portrait', 
 8             border: '1cm' };
 9       page.render("front-Thinking.pdf");
10    } else {
11       console.log("Page failed to load."); 
12    }
13    phantom.exit(0);
14 });

图片 17

  注:当中,pagerSize设置pdf的格式。结果如下:

图片 18

  利用那一个提供的特色,你完全能够做二个爬虫去爬去外人的网址。

  8、文件操作相关


  文件操作在编码中拾叁分有用,比方你能够将有些配置消息放在文件中,在程序试行的长河中去读取;你也得以将您程序实行进程中一些立见成效的消息保存为文件。由此文件I/O极其实用。我们举个轻松的例子,读取文件新闻:

图片 19

 1 var filePath = '/workspace/file1.js';//文件路径
 2 
 3 //判断文件是否存在,是文件还是文件夹
 4 if( fs.exists(filePath) && fs.isFile(filePath) ) {
 5        var ins = fs.open(filePath, 'r');//打开文件
 6         while(!ins.atEnd()) {//循环读取文件内容
 7            var buffer = ins.readLine();//一行行的读取
 8            console.log(buffer);
 9        }
10 }

图片 20

  这里,读取文件内容并逐行打字与印刷。文件操作有以下两种情势:

1 r      //读取文件
2 w    //写文件,回覆盖
3 a     //写文件,追加
4 rb    //读取二进制流
5 rw    //写入二进制流

  9、模块化


  模块化是没个技艺都提到到的源委,这里不做详细介绍了。具体可参看阮生机勃勃峰前辈的博客:

  10、与jQuery品级三方的结缘


  有无数第三方非常卓越的库函数,那么这里大家就举三个贵宗都十分向往的jQuery库函数来说讲phantomJS与库函数的组合。代码如下:

图片 21

 1 var page = require('webpage').create();
 2 page.open("http://www.cnblogs.com/front-Thinking/", function(status) {
 3     if ( status === "success" ) {
 4         page.render("before.png");
 5         page.includeJs("http://code.jquery.com/jquery-1.10.1.min.js", 
 6             function() {
 7                 page.evaluate(function() {
 8                 $('#Header1_HeaderTitle').html('My PhantomJS');
 9             });
10             page.render("after.png");
11             phantom.exit();();
12         });
13     }
14 });

图片 22

  以上代码,访谈小编的博客地址,并抓取截屏,加载jquery后修正作者博客的标题,结果如下:

  图片 23

before.png

图片 24

    

  after.png

  11、其它


  PhantomJS能够做的作业太多了以有关笔者有可能都介绍了独有它N分之风姿洒脱,N趋于无穷大。说了单独是入门的帖子,所以就不再深刻介绍下去了,当然笔者也只是个小白,权且知道驾驭的也正如浅显。其实,PhantomJS能够组合Jasmine来一齐做测量检验,能够节约超大的人工和岁月开销。同偶尔候,开源社区有许多依据PhantomJS做的工具和接受,举个例子前端爬虫等,有野趣的不要紧去读读。

本文由金沙APP发布于www.1145.com,转载请注明出处:PhantomJS快速入门

上一篇:竞品分析报告撰写的方法 下一篇:没有了
猜你喜欢
热门排行
精彩图文