使用phantomjs操作DOM并对页面进行截图需要注意的几个问题
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); });
截屏效果图:
转载于:https://www.cnblogs.com/xiehuiqi220/p/3551699.html
使用phantomjs操作DOM并对页面进行截图需要注意的几个问题相关推荐
- 通过JavaScript简单的操作DOM(一)
通过JavaScript简单的操作DOM (一)简单的前提概念 1.DOM简介 DOM,文档对象模型.描述了HTML和XML文档结构,然后提供API,来帮助开发人员添加.删除.修改页面的某一部分. ( ...
- jQuery操作Dom、jQuery事件机制、jQuery补充部分
jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...
- Javascript操作DOM常用API总结
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...
- JavaScript操作DOM对象
目录 一.DOM操作 (一).DOM操作分类 (二).节点和节点的关系 (三).访问节点 (四).节点信息 二.操作节点 (一)操作节点的属性 (二).创建和插入节点 (三).删除和替换节点 (四). ...
- VUE如何操作DOM
最近有些自闭,life is a shit,但是学习不能停,也开始继续健身了,试图让自己好一点. 这是学习VUE的第一篇博客,先来说一下准备工作.我们需要在谷歌商店安装vue-devtools插件,打 ...
- vanilla_如何在Vanilla JavaScript中操作DOM
vanilla by carlos da costa 通过卡洛斯·达·科斯塔 如何在Vanilla JavaScript中操作DOM (How to manipulate the DOM in Van ...
- 【repost】Javascript操作DOM常用API总结
Javascript操作DOM常用API总结 文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...
- jQuery操作DOM对象
jQuery操作DOM对象 1.使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设 ...
- vue操作dom元素的三种方法介绍和分析
相信大家在做项目的时候,肯定会遇到这样的问题:我点击新增按钮,需要弹出个弹框,然后我点击对应的关闭按钮,关闭弹框,但是新增按钮和关闭按钮操作的是另一个元素,所以需要获取dom元素进行操控,那么在vue ...
最新文章
- 阿里面试: 说说强引用、软引用、弱引用、虚引用吧
- 【安全漏洞】CVE-2021-1732 win32k漏洞分析
- 仿ArrayList功能的bag类
- Struts2.x中获取request,response,session的方式
- UbuntuKylin安装SUN JDK1.7
- 11个恶意python包被指窃取 Discord 令牌、安装shell
- kali 如何使用word_如何学习并玩好kali?
- Win10,Office2016及以上图标异常解决方案
- SQL语句:联合查询
- linux类mac桌面,让Linux Mint看起来更像Mac桌面的主题
- pandas数据拼接
- 基于STM32F103的步进电机S型曲线加减速算法与实现
- 怎样P漫画脸?这三个简单方法分享给你
- 离职,见人品,显格局
- 电力电子器件和 电路应用知识点考点总结
- CSS @font-face用法小结
- 基于多元回归模型的房产估价
- 博彦科技以太机器人平台亮相世界人工智能大会 赋能企业智慧升级
- java实习生第一天到公司
- Win7系统日语输入法下键盘错位的解决方法
热门文章
- linux终端配备时钟oh-my-zsh主题
- QuorumPeerMain数量可否和HRegionServer节点数量不一致?
- Yarn的默认端口(转载)
- ubuntu下面的java一键运行脚本
- python生成器generator:深度学习读取batch图片
- php smarty安装,【php】smarty安装
- 【机器学习】机器学习一些概念的整理(不断更新中)
- 找出所有层级_数轴上的行程问题1:你的数学思维水平在哪一个层级?
- python实现雪花飘落效果_jQuery实现雪花飘落效果
- Mobx, 化繁为简的艺术