phantomjs是一个无界面浏览器，可用于网页截图和前端自动化测试，基于webkit内核（也就是chrome使用的内核），并使用js编写业务脚本来请求、浏览和操作页面。最近前端监控需要用到phantomjs，特地研究了一下这个组件，遇到几个坑，这里汇总起来，希望对大家尤其是刚入门者有所帮助。
1、如何操作页面中的DOM元素？
这个问题比较简单，官方API提供了page.evaluate函数，范例代码：
page.evaluate(function() { var plist = document.querySelectorAll("a");//获取所有链接 });
2、如何滚动到页面底部？
部分页面使用了lazyload，比如图片或js的延迟加载，只有滚动到底部才会触发，因此对于这种页面，如果要展示完整的页面，则需设法使底部可见，主要有3个办法：
1、使浏览器足够大，这样底部就显示了，可以设置viewPortSize很大：page.viewportSize = {width: 4800,height: 8000};
2、通过BOM方法操作滚动条，可以把滚动条滚动到一个很大的值，如：window.scrollTo(0,10000);也可以滚动到适应的高度：window.document.body.scrollTop = document.body.scrollHeight;
3、如何延迟截图？
页面请求的资源，如图片、异步cgi、js等，返回的时间以及执行的长短都是不确定的，如果截图过早，可能很多空白区域，因此需要定时截图，在打开页面后，使用setTimeout来延迟截图：
window.setTimeout(function () { page.render("json2form.png"); phantom.exit(); }, 1000);
4、注意page.evaluate中的回调函数作用域链
对于初学者，很可能写出这样的代码（不是吗？看起来很正常，JS支持闭包呀？）：
var page = require('webpage').create(); var url = 'http://json2form.wikisoft.me//'; var globalVar = 1; page.open(url, function (status) { if (status != "success") { console.log('FAIL to load the address'); } page.evaluate(function() { var x = globalVar;//引用本js的一个全局变量 page.method();//执行phantomjs的一个api }); });
有个问题需要明白，page.evaluate中的函数是在目标网页执行的，其上下文、作用域链已经不能与phantomjs执行这个js同日而语，因此请勿在evaluate中引用phantomjs的api或你这个js文件中的全局变量，否则出了错，都很难定位。
上述几个总结如有谬误也欢迎指正，最后附上一个完整的代码（请求某网页、对链接标记红框，并延迟截图，已验证）：
var page = require('webpage').create(); var url = 'http://www.w3school.com.cn/'; page.open(url, function (status) { if (status != "success") { console.log('FAIL to load the address'); phantom.exit(); } page.evaluate(function() { //此函数在目标页面执行的，上下文环境非本phantomjs，所以不能用到这个js中其他变量 window.scrollTo(0,10000);//滚动到底部 //window.document.body.scrollTop = document.body.scrollHeight; window.setTimeout(function() { var plist = document.querySelectorAll("a"); var len = plist.length; while(len) { len--; var el = plist[len]; el.style.border = "1px solid red"; } },5000); }); window.setTimeout(function () { page.render("json2form.png"); phantom.exit(); }, 5000+500); });
截屏效果图：
AForm，业界称奇的表单开发框架，极大提高您开发信息系统的效率。查看演示
关于PhantomJS
PhantomJS 是一个基于WebKit的服务器端 JavaScript API。它全面支持web而不需浏览器支持，其快速，原生支持各种Web标准： DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG。PhantomJS可以用于页面自动化，网络监测，网页截屏，以及无界面测试等。
我们还可以用它来做爬虫哦，大家知道，网页上有些数据是通过执行js渲染出来的，这样的话爬虫去抓取数据的时候就会很麻烦，PhantomJS自带WebKit内核，我们可以利用PhantomJS解决爬虫不能执行js的问题。
这次要说的是他的截图功能
下面是官网提供的rasterize.js截图示例：
var page = require('webpage').create(),
system = require('system'),
address, output, size;
if (system.args.length < 3 || system.args.length > 5) {
console.log('Usage: rasterize.js URL filename [paperwidth*paperheight|paperformat] [zoom]');
console.log(' paper (pdf output) examples: "5in*7.5in", "10cm*20cm", "A4", "Letter"');
console.log(' image (png/jpg output) examples: "1920px" entire page, window width 1920px');
console.log(' "800px*600px" window, clipped to 800x600');
phantom.exit(1);
} else {
address = system.args[1];
output = system.args[2];
page.viewportSize = { width: 600, height: 600 };
if (system.args.length > 3 && system.args[2].substr(-4) === ".pdf") {
size = system.args[3].split('*');
page.paperSize = size.length === 2 ? { width: size[0], height: size[1], margin: '0px' }
: { format: system.args[3], orientation: 'portrait', margin: '1cm' };
} else if (system.args.length > 3 && system.args[3].substr(-2) === "px") {
size = system.args[3].split('*');
if (size.length === 2) {
pageWidth = parseInt(size[0], 10);
pageHeight = parseInt(size[1], 10);
page.viewportSize = { width: pageWidth, height: pageHeight };
// 通过clipRect可以指定渲染的区域：
page.clipRect = { top: 0, left: 0, width: pageWidth, height: pageHeight };
} else {
console.log("size:", system.args[3]);
pageWidth = parseInt(system.args[3], 10);
pageHeight = parseInt(pageWidth * 3/4, 10); // it's as good an assumption as any
console.log ("pageHeight:",pageHeight);
page.viewportSize = { width: pageWidth, height: pageHeight };
}
}
if (system.args.length > 4) {
page.zoomFactor = system.args[4];
}
page.open(address, function (status) {
if (status !== 'success') {
console.log('Unable to load the address!');
phantom.exit(1);
} else {
window.setTimeout(function () {
page.render(output);
phantom.exit();
}, 200);
}
});
}上面的代码可以进行截图，不过问题就在于，页面的高度需要我们手动指定，那就不方便了。
在园子里发现有个哥们通过手动设定高度的方法来解决这个问题：http://www.cnblogs.com/xiehuiqi220/p/3551699.html，不过页面的高度没有那么高，渲染的图片下面就会出现大块的留白，也是不够灵活。
想到PhantomJS本身也可以执行js的，我们可以将页面加载完毕后，获取页面的实际高度，然后重新设定截取的区域，不就可以解决了。
于是便有了以下代码：
// 通过在页面上执行脚本获取页面的渲染高度
var bb = page.evaluate(function () {
return document.getElementsByTagName('html')[0].getBoundingClientRect();
});
// 按照实际页面的高度，设定渲染的宽高
page.clipRect = {
top: bb.top,
left: bb.left,
width: bb.width,
height: bb.height
};
// 预留一定的渲染时间
window.setTimeout(function () {
page.render(file);
page.close();
console.log('render ok');
}, 1000);改造后的代码如下：
var page = require('webpage').create(),
system = require('system'),
address, output, size;
if (system.args.length < 3 || system.args.length > 5) {
console.log('Usage: rasterize.js URL filename');
phantom.exit(1);
} else {
address = system.args[1];
output = system.args[2];
page.viewportSize = { width: 1024, height: 600 };
page.open(address, function (status) {
// 通过在页面上执行脚本获取页面的渲染高度
var bb = page.evaluate(function () {
return document.getElementsByTagName('html')[0].getBoundingClientRect();
});
// 按照实际页面的高度，设定渲染的宽高
page.clipRect = {
top: bb.top,
left: bb.left,
width: bb.width,
height: bb.height
};
// 预留一定的渲染时间
window.setTimeout(function () {
page.render(output);
page.close();
console.log('render ok');
}, 1000);
});
}通过执行D:\Software\phantomjs-1.9.7-windows>phantomjs.exe render.js http://cnblogs.com cnblogs.png就可以把博客园首页截取下来了。
效果如下：
PhantomJS内置一个小型的Web服务器，我们可以将其封装成服务，这里就不过多介绍了，大家可以移步这里：http://www.jb51.net/article/43328.htm
3324
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
