phantomjs是一個(gè)無(wú)界面瀏覽器，可用于網(wǎng)頁(yè)截圖和前端自動(dòng)化測(cè)試，基于webkit內(nèi)核（也就是chrome使用的內(nèi)核），并使用js編寫(xiě)業(yè)務(wù)腳本來(lái)請(qǐng)求、瀏覽和操作頁(yè)面。最近前端監(jiān)控需要用到phantomjs，特地研究了一下這個(gè)組件，遇到幾個(gè)坑，這里匯總起來(lái)，希望對(duì)大家尤其是剛?cè)腴T(mén)者有所幫助。

?

1、如何操作頁(yè)面中的DOM元素？

這個(gè)問(wèn)題比較簡(jiǎn)單，官方API提供了page.evaluate函數(shù)，范例代碼：

?

page.evaluate(function(){var plist = document.querySelectorAll("a");//獲取所有鏈接});

?

2、如何滾動(dòng)到頁(yè)面底部？

部分頁(yè)面使用了lazyload，比如圖片或js的延遲加載，只有滾動(dòng)到底部才會(huì)觸發(fā)，因此對(duì)于這種頁(yè)面，如果要展示完整的頁(yè)面，則需設(shè)法使底部可見(jiàn)，主要有3個(gè)辦法：

　　1、使瀏覽器足夠大，這樣底部就顯示了，可以設(shè)置viewPortSize很大：page.viewportSize = {width: 4800,height: 8000};

　　2、通過(guò)BOM方法操作滾動(dòng)條，可以把滾動(dòng)條滾動(dòng)到一個(gè)很大的值，如：window.scrollTo(0,10000);也可以滾動(dòng)到適應(yīng)的高度：window.document.body.scrollTop = document.body.scrollHeight;

?

3、如何延遲截圖？

頁(yè)面請(qǐng)求的資源，如圖片、異步cgi、js等，返回的時(shí)間以及執(zhí)行的長(zhǎng)短都是不確定的，如果截圖過(guò)早，可能很多空白區(qū)域，因此需要定時(shí)截圖，在打開(kāi)頁(yè)面后，使用setTimeout來(lái)延遲截圖：

?

window.setTimeout(function () {page.render("json2form.png");phantom.exit();}, 1000);

?

4、注意page.evaluate中的回調(diào)函數(shù)作用域鏈

對(duì)于初學(xué)者，很可能寫(xiě)出這樣的代碼（不是嗎？看起來(lái)很正常，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的一個(gè)全局變量page.method();//執(zhí)行phantomjs的一個(gè)api }); });

?

有個(gè)問(wèn)題需要明白，page.evaluate中的函數(shù)是在目標(biāo)網(wǎng)頁(yè)執(zhí)行的，其上下文、作用域鏈已經(jīng)不能與phantomjs執(zhí)行這個(gè)js同日而語(yǔ)，因此請(qǐng)勿在evaluate中引用phantomjs的api或你這個(gè)js文件中的全局變量，否則出了錯(cuò)，都很難定位。

?

上述幾個(gè)總結(jié)如有謬誤也歡迎指正，最后附上一個(gè)完整的代碼（請(qǐng)求某網(wǎng)頁(yè)、對(duì)鏈接標(biāo)記紅框，并延遲截圖，已驗(yàn)證）：

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(){//此函數(shù)在目標(biāo)頁(yè)面執(zhí)行的，上下文環(huán)境非本phantomjs，所以不能用到這個(gè)js中其他變量 window.scrollTo(0,10000);//滾動(dòng)到底部//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); });

?

截屏效果圖：

轉(zhuǎn)載于:https://www.cnblogs.com/xiehuiqi220/p/3551699.html

總結(jié)

以上是生活随笔為你收集整理的使用phantomjs操作DOM并对页面进行截图需要注意的几个问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。