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

?

1、如何操作頁面中的DOM元素？

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

?

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

?

2、如何滾動到頁面底部？

部分頁面使用了lazyload，比如圖片或js的延遲加載，只有滾動到底部才會觸發(fā)，因此對于這種頁面，如果要展示完整的頁面，則需設法使底部可見，主要有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等，返回的時間以及執(zhí)行的長短都是不確定的，如果截圖過早，可能很多空白區(qū)域，因此需要定時截圖，在打開頁面后，使用setTimeout來延遲截圖：

?

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

?

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

對于初學者，很可能寫出這樣的代碼（不是嗎？看起來很正常，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();//執(zhí)行phantomjs的一個api }); });

?

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

?

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

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ù)在目標頁面執(zhí)行的，上下文環(huán)境非本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); });

?

截屏效果圖：

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

總結(jié)

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

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