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

  保存为pdf:

  上边的on+事件,做了四件事,监听资源文件请求和加载成功事件,监听文档加载初叶形成事件,获取相应的时日,那样我们就可以动用这么些事件去分析这么些页面的性质问题了。

  有诸多第三方非凡精良的库函数,那么这里咱们就举一个豪门都很是欣赏的jQuery库函数来讲讲phantomJS与库函数的咬合。代码如下:



  9、模块化

  PhantomJS是一个基于webkit的JavaScript
API。它利用QtWeb基特作为它基本浏览器的效益,使用webkit来编译解释施行JavaScript代码。任何你可以在遵照webkit浏览器做的事务,它都能做到。它不不过个藏匿的浏览器,提供了诸如CSS采用器、补助Web标准、DOM操作、JSON、HTML5、Canvas、SVG等,同时也提供了处理公事I/O的操作,从而使您可以向操作系统读写文件等。PhantomJS的用处可谓相当常见,诸如网络监测、网页截屏、无需浏览器的
Web 测试、页面访问自动化等。

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

监听资源文件请求事件,获取资源发起请求的时间;
1 phantomjs hello.js

  webpage:如您所见,下面的事例大家早已见识了它的威力了。它的效应至关重如果提供了一套可以访问和操作web文档的主干措施,包括操作DOM、事件捕获、用户事件模拟等等。

图片 1

before.png

  监听也没先河加载事件,获取初叶加载时间;

图片 2

  好了,到最近截至,可以起来大家的率先个PhantomJS程序了。打开你的干活目录,新建文件hello.js,敲入以下代码,Ctrl+S保存:

  第二个,我们都应有相比熟识了:

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

  保存为图片:

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

  在真的的浏览器里,任何事件发生都可见,而在PhantomJS里都是不可见的。在PhantomJS里,我们得以捕获这多少个事件并做出相应处理。由于涉及到的轩然大波有过多种,那么我们前日仅仅把一个比较有效的风波视作例子,基于这么些事件你可以监督一个页面并做出分析:

图片 3


图片 4

正文简要介绍了PhantomJS的相关基础知识点,紧要不外乎PhantomJS的牵线、下载与安装、HelloWorld程序、主旨模块介绍等。由于鄙人才疏学浅,难免有遗漏之处,欢迎指正互换。

  假如你的结果跟自己的一模一样,那么恭喜您,你早已打响跑起来属于您的首先个PhantomJS程序了。那么我们大概介绍下方面的代码:第2行,webpage是phantomjs的主题模块之一,它给用户提供了拜访、操作、拔取web文档的接口。第3行,设置下编码格式,否则输出的或是是乱码。第4行,运行page.open函数,其中首个参数是您要拜访的url,第二个参数是一个回调函数。在回调函数里我们检查了下回到的意况,假如是success那么我们就将浏览的url制定文档的title打印出来,如你所见,假如不是那么打印文档加载出错。最终一行退出phantomjs执行环境。

图片 5

图片 6

    

图片 7

  其余一些布局新闻,执行PhantomJS的吩咐格式如下:

  这里,读取文件内容并逐行打印。文件操作有以下二种艺术:

  模仿用户点击事件:

  利用这一个提供的特点,你完全可以做一个爬虫去爬去旁人的网站。

  到这边,你曾经打响下载安装好PhantomJS了。那么,打开D:\workspace\phantomjs\bin文件夹,双击运行phantomjs.exe,出现如下界面,那么您就足以运作JS代码了。



图片 8

  10、与jQuery等第三方的组成


图片 9

  PhantomJS官方示例:http://phantomjs.org/examples/。

  将要访问的页面抓取保存为图片或者PDF文件的格式,这在PhantomJS里异常简单。我们下面就各自做一个保存图片和PDF的例子:

  PhantomJS GitHub:https://github.com/ariya/phantomjs/。

图片 10


1 sendEvent( eventType, Point X, Point Y, button='left' )
2 eventType: mouseup  mousedown mousemove click doubleclick
3 Point X : 触发事件的X坐标
4 Point Y: 触发事件的Y坐标

  我们看一个接纳querySelector的事例:

 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 });
1 phantomjs --cookie-file=cookie.txt hello.js

  phantomJS提供了二种模拟点击事件的接口,一个是send伊夫nt,phantomJS事件触发器;一个是DOM事件触发器。

图片 11

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

图片 12

  7、抓取页面

  1、PhantomJS是什么?

  11、其它


  3、第一个PhantomJS小程序HelloWorld

图片 13

  6、事件处理

图片 14

图片 15

1 phantomjs --debug=yes hello.js

  我们先看看首个,语法如下:

1 phantomjs [switches] [options] [script] [argument [argument [...]]]
 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 });

  evaluate函数是个新东西,其实很简单,就是在webpage环境下举办evaluate传入的回调函数,在这中间实践与phantom相关的操作可以避免web页面刺探phantom相关的安装音讯。上边的代码就相比较简单了,不啰嗦了。

图片 16

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

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

  PhantomJS官方API:http://phantomjs.org/api/。

  webserver:如其名字同样,你可以依照它来落实自己的webserver,用来拍卖请求并且实施PhantomJS代码等。

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

  模块化是没个技巧都关乎到的始末,这里不做详细介绍了。具体可参看阮一峰前辈的博客:http://www.ruanyifeng.com/blog/2012/10/javascript\_module.html

  5、操作page content

图片 17

  4、PhantomJS核心API

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

  after.png

  文件操作在编码中特别有用,例如你可以将部分配置音信放在文件中,在程序执行的经过中去读取;你也得以将你程序执行过程中一些实用的音信保存为文件。由此文件I/O相当管用。我们举个简单的例子,读取文件信息:

  system:该模块提供了一些与操作系统相关的接口,例如访问操作系统音信、访问系统环境变量、接受命令行参数等等与程序执行相关的系统消息。

  其中,各样参数都是可选的。例如我们第一个程序的执行命令如下:

  设置cookie路径:

  fs:即FileSystem。熟练NodeJS的朋友都晓得,NodeJS也内建了相关的中央模块。fs提供了实施文书I/O操作的标准接口,如读写文件、删除文件等。它使得你持久化一些文本(如logfile等)变得非凡容易。

  图片 18

图片 19

  2、PhantomJS下载与安装

  PhantomJS可以做的事务太多了以关于我或者都介绍了唯有它N分之一,N趋于无穷大。说了无非是入门的帖子,所以就不再深远介绍下去了,当然我也只是个小白,暂时知道驾驭的也相比较浅显。其实,PhantomJS可以组合Jasmine来一起做测试,可以节约很大的人力和时间资产。同时,开源社区有诸多基于PhantomJS做的工具和行使,例如前端爬虫等,有趣味的不妨去读读。

  DOM选择器,常用的getElementById、getElementByClassName、getElementByName、getElementByTagName、querySelector(CSS选择器)。

  由于我们都相比懒,不欣赏为了运行一个先后连接跑到D:\workspace\phantomjs\bin文件夹打开phantomjs.exe。那么,你可以将phantomjs.exe添加到环境变量里。具体如下:打开自己的处理器->右键属性->高级系统安装->高级标签->环境变量,在系统变量里找到Path,将您的phantomjs添加到环境变量里。比方说我的门道添加的为“;D:\workspace\phantomjs\bin”,切记不要少了前边那一个分号。

  8、文件操作相关

1 var content = page.evaluate(function () {
2 var element = document.querySelector('#elem');
3     return element.textContent;
4 });
5 console.log(content);

图片 20

  在helloworld中我们早就学会了哪些访问一个url并取出它的title。下边我们看看哪些挑选并操作DOM元素:

  下载完成后解压文件,提议为方便使用,单独放在一个文件夹里,如我放在D:\workspace\phantomjs里。

图片 21


图片 22

  官方下载地址:http://phantomjs.org/download.html。目前官方支持三种操作系统,包括windows\\Mac
OS\Linux那三大主流的条件。你可以依照你的运作环境选拔要下载的包,我的周转条件是Windows7。

图片 23

图片 24

 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 };
监听文档加载完成事件,记录完成时间,并打印出所有资源文件的耗时。

 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 }
1 var startTime = null;
2 page.onLoadStarted = function() {
3     startTime = new Date().getTime();
4 }

  PhantomJS官方地址:http://phantomjs.org/。

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

  以上代码,访问我的博客地址,并抓取截屏,加载jquery后修改我博客的标题,结果如下:

  打开debug格局(该情势用于支付,可提供必需指示音信):

相关文章

网站地图xml地图