PhantomJS v1.4.1을 사용하여 일부 웹 페이지를로드하고 있습니다. 서버 측에 액세스 할 수 없으며 링크를 가져옵니다. 해당 웹 페이지에서 Adobe Flash를 지원해야하므로 사용되지 않는 Phantom 버전을 사용하고 있습니다.
문제는 많은 웹 사이트가 사소한 콘텐츠를 비동기 적으로로드하는 것이므로 모든 것이 아직로드되지 않은 경우 Phantom의 onLoadFinished 콜백 (HTML의 onLoad에 대한 아날로그)이 너무 일찍 발생하는 이유입니다. 누구나 웹 페이지가 가득 찰 때까지 기다릴 수있는 방법을 제안 할 수 있습니까 (예 : 광고와 같은 모든 동적 콘텐츠가 포함 된 스크린 샷)?
답변
또 다른 방법은 일반적인 rasterize.js 예제에 따라 페이지를로드 한 후 PhantomJS에게 페이지로드 후 약간 기다렸다가 JavaScript가 추가 리소스로드를 완료 할 수 있도록 시간 초과가 길어 지도록 요청하는 것입니다.
page.open(address, function (status) {
if (status !== 'success') {
console.log('Unable to load the address!');
phantom.exit();
} else {
window.setTimeout(function () {
page.render(output);
phantom.exit();
}, 1000); // Change timeout as required to allow sufficient time
}
});답변
오히려 주기적으로 document.readyState상태를 확인하고 싶습니다 ( https://developer.mozilla.org/en-US/docs/Web/API/document.readyState ). 이 방법은 다소 어수선하지만 내부 onPageReady기능이 완전히로드 된 문서를 사용 하고 있는지 확인할 수 있습니다 .
var page = require("webpage").create(),
url = "http://example.com/index.html";
function onPageReady() {
var htmlContent = page.evaluate(function () {
return document.documentElement.outerHTML;
});
console.log(htmlContent);
phantom.exit();
}
page.open(url, function (status) {
function checkReadyState() {
setTimeout(function () {
var readyState = page.evaluate(function () {
return document.readyState;
});
if ("complete" === readyState) {
onPageReady();
} else {
checkReadyState();
}
});
}
checkReadyState();
});추가 설명 :
임의의 이유로 인해 실행이 연장 될 때 “중첩”및 경쟁 조건이 발생 하지 setTimeout않고 중첩 을 사용 합니다. 기본 지연이 4ms ( https://stackoverflow.com/a/3580085/1011156 )이므로 활성 폴링은 프로그램 성능에 큰 영향을 미치지 않습니다.setIntervalcheckReadyStatesetTimeout
document.readyState === "complete"문서에 모든 자원이 완전히로드되었음을 의미합니다 ( https://html.spec.whatwg.org/multipage/dom.html#current-document-readiness ).
답변
대기 및 래스터 화 예제의 조합을 시도해 볼 수 있습니다.
/**
* See https://github.com/ariya/phantomjs/blob/master/examples/waitfor.js
*
* Wait until the test condition is true or a timeout occurs. Useful for waiting
* on a server response or for a ui change (fadeIn, etc.) to occur.
*
* @param testFx javascript condition that evaluates to a boolean,
* it can be passed in as a string (e.g.: "1 == 1" or "$('#bar').is(':visible')" or
* as a callback function.
* @param onReady what to do when testFx condition is fulfilled,
* it can be passed in as a string (e.g.: "1 == 1" or "$('#bar').is(':visible')" or
* as a callback function.
* @param timeOutMillis the max amount of time to wait. If not specified, 3 sec is used.
*/
function waitFor(testFx, onReady, timeOutMillis) {
var maxtimeOutMillis = timeOutMillis ? timeOutMillis : 3000, //< Default Max Timout is 3s
start = new Date().getTime(),
condition = (typeof(testFx) === "string" ? eval(testFx) : testFx()), //< defensive code
interval = setInterval(function() {
if ( (new Date().getTime() - start < maxtimeOutMillis) && !condition ) {
// If not time-out yet and condition not yet fulfilled
condition = (typeof(testFx) === "string" ? eval(testFx) : testFx()); //< defensive code
} else {
if(!condition) {
// If condition still not fulfilled (timeout but condition is 'false')
console.log("'waitFor()' timeout");
phantom.exit(1);
} else {
// Condition fulfilled (timeout and/or condition is 'true')
console.log("'waitFor()' finished in " + (new Date().getTime() - start) + "ms.");
typeof(onReady) === "string" ? eval(onReady) : onReady(); //< Do what it's supposed to do once the condition is fulfilled
clearInterval(interval); //< Stop this interval
}
}
}, 250); //< repeat check every 250ms
};
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"');
phantom.exit(1);
} else {
address = system.args[1];
output = system.args[2];
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 : {
left : "5mm",
top : "8mm",
right : "5mm",
bottom : "9mm"
}
};
}
if (system.args.length > 4) {
page.zoomFactor = system.args[4];
}
var resources = [];
page.onResourceRequested = function(request) {
resources[request.id] = request.stage;
};
page.onResourceReceived = function(response) {
resources[response.id] = response.stage;
};
page.open(address, function(status) {
if (status !== 'success') {
console.log('Unable to load the address!');
phantom.exit();
} else {
waitFor(function() {
// Check in the page if a specific element is now visible
for ( var i = 1; i < resources.length; ++i) {
if (resources[i] != 'end') {
return false;
}
}
return true;
}, function() {
page.render(output);
phantom.exit();
}, 10000);
}
});
}답변
onResourceRequested및 onResourceReceived콜백 을 사용하여 비동기로드를 감지 할 수 있습니다 . 다음 은 문서에서 콜백을 사용하는 예입니다 .
var page = require('webpage').create();
page.onResourceRequested = function (request) {
console.log('Request ' + JSON.stringify(request, undefined, 4));
};
page.onResourceReceived = function (response) {
console.log('Receive ' + JSON.stringify(response, undefined, 4));
};
page.open(url);또한 examples/netsniff.js실제 예제를 볼 수 있습니다 .
답변
다음은 모든 리소스 요청이 완료되기를 기다리는 솔루션입니다. 완료되면 페이지 내용을 콘솔에 기록하고 렌더링 된 페이지의 스크린 샷을 생성합니다.
이 솔루션이 좋은 출발점으로 작용할 수는 있지만 이것이 실패한 것으로 보아 완벽한 솔루션은 아닙니다!
를 사용하여 많은 운이 없었습니다 document.readyState.
나는에 의해 영향을 받았다 waitfor.js의 온 발견 예를 phantomjs 예 페이지 .
var system = require('system');
var webPage = require('webpage');
var page = webPage.create();
var url = system.args[1];
page.viewportSize = {
width: 1280,
height: 720
};
var requestsArray = [];
page.onResourceRequested = function(requestData, networkRequest) {
requestsArray.push(requestData.id);
};
page.onResourceReceived = function(response) {
var index = requestsArray.indexOf(response.id);
requestsArray.splice(index, 1);
};
page.open(url, function(status) {
var interval = setInterval(function () {
if (requestsArray.length === 0) {
clearInterval(interval);
var content = page.content;
console.log(content);
page.render('yourLoadedPage.png');
phantom.exit();
}
}, 500);
});답변
내 프로그램에서는로드가 있는지 여부를 판단하기 위해 몇 가지 논리를 사용합니다. 네트워크 요청을보고, 지난 200ms 동안 새로운 요청이 없었 으면 온로드로 처리합니다.
onLoadFinish () 후에 이것을 사용하십시오.
function onLoadComplete(page, callback){
var waiting = []; // request id
var interval = 200; //ms time waiting new request
var timer = setTimeout( timeout, interval);
var max_retry = 3; //
var counter_retry = 0;
function timeout(){
if(waiting.length && counter_retry < max_retry){
timer = setTimeout( timeout, interval);
counter_retry++;
return;
}else{
try{
callback(null, page);
}catch(e){}
}
}
//for debug, log time cost
var tlogger = {};
bindEvent(page, 'request', function(req){
waiting.push(req.id);
});
bindEvent(page, 'receive', function (res) {
var cT = res.contentType;
if(!cT){
console.log('[contentType] ', cT, ' [url] ', res.url);
}
if(!cT) return remove(res.id);
if(cT.indexOf('application') * cT.indexOf('text') != 0) return remove(res.id);
if (res.stage === 'start') {
console.log('!!received start: ', res.id);
//console.log( JSON.stringify(res) );
tlogger[res.id] = new Date();
}else if (res.stage === 'end') {
console.log('!!received end: ', res.id, (new Date() - tlogger[res.id]) );
//console.log( JSON.stringify(res) );
remove(res.id);
clearTimeout(timer);
timer = setTimeout(timeout, interval);
}
});
bindEvent(page, 'error', function(err){
remove(err.id);
if(waiting.length === 0){
counter_retry = 0;
}
});
function remove(id){
var i = waiting.indexOf( id );
if(i < 0){
return;
}else{
waiting.splice(i,1);
}
}
function bindEvent(page, evt, cb){
switch(evt){
case 'request':
page.onResourceRequested = cb;
break;
case 'receive':
page.onResourceReceived = cb;
break;
case 'error':
page.onResourceError = cb;
break;
case 'timeout':
page.onResourceTimeout = cb;
break;
}
}
}답변
이 접근법이 어떤 경우에는 유용하다는 것을 알았습니다.
page.onConsoleMessage(function(msg) {
// do something e.g. page.render
});페이지를 소유 한 경우보다 일부 스크립트를 내부에 넣습니다.
<script>
window.onload = function(){
console.log('page loaded');
}
</script>