blocks|key|311273|text|也许您可以使用onResourceRequested+and+onResourceReceived+callbacks来检测异步加载。下面是使用这些回调from+their+documentation的一个示例|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|311274|var+page+=+require('webpage').create();
page.onResourceRequested+=+function+(request)+{
++++console.log('Request+'+%2B+JSON.stringify(request,+undefined,+4));
};
page.onResourceReceived+=+function+(response)+{
++++console.log('Receive+'+%2B+JSON.stringify(response,+undefined,+4));
};
page.open(url);|code-block|syntax|javascript|311275|此外，您还可以查看examples/netsniff.js中的工作示例。|311276|entityMap|0|LINK|mutability|MUTABLE|url|http://code.google.com/p/phantomjs/wiki/Interface#Callbacks|1|http://code.google.com/p/phantomjs/wiki/QuickStart#Network_traffic^0|7|J|V|I|7|1G|0|24|O|1|0|0|9|K|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]|$9|14|A|15|1|16]]|E|$]]|$1|F|3|G|5|H|7|17|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]|U|$5|P|Q|R|E|$S|V]]]]

Maybe you can use the <a href="http://code.google.com/p/phantomjs/wiki/Interface#Callbacks"><code>onResourceRequested</code> and <code>onResourceReceived</code> callbacks</a> to detect asynchronous loading. Here's an example of using those callbacks <a href="http://code.google.com/p/phantomjs/wiki/QuickStart#Network_traffic">from their documentation</a>:

<pre><code>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);
</code></pre>

Also, you can look at <code>examples/netsniff.js</code> for a working example.

blocks|key|311329|text|您可以尝试waitfor和rasterize示例的组合：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|311330|/**
+*+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+"+%2B+(new+Date().getTime()+-+start)+%2B+"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+%7C%7C+system.args.length+>+5)+{
++++console.log('Usage:+rasterize.js+URL+filename+[paperwidth*paperheight%7Cpaperformat]+[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;+%2B%2Bi)+{
++++++++++++++++++++if+(resources[i]+!=+'end')+{
++++++++++++++++++++++++return+false;
++++++++++++++++++++}
++++++++++++++++}
++++++++++++++++return+true;
++++++++++++},+function()+{
+++++++++++++++page.render(output);
+++++++++++++++phantom.exit();
++++++++++++},+10000);
++++++++}
++++});
}|code-block|syntax|javascript|311331|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You could try a combination of the waitfor and rasterize examples:

<pre><code>/**
 * 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, //&lt; Default Max Timout is 3s
 start = new Date().getTime(),
 condition = (typeof(testFx) === "string" ? eval(testFx) : testFx()), //&lt; defensive code
 interval = setInterval(function() {
 if ( (new Date().getTime() - start &lt; maxtimeOutMillis) &amp;&amp; !condition ) {
 // If not time-out yet and condition not yet fulfilled
 condition = (typeof(testFx) === "string" ? eval(testFx) : testFx()); //&lt; 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(); //&lt; Do what it's supposed to do once the condition is fulfilled
 clearInterval(interval); //&lt; Stop this interval
 }
 }
 }, 250); //&lt; repeat check every 250ms
};

var page = require('webpage').create(), system = require('system'), address, output, size;

if (system.args.length &lt; 3 || system.args.length &gt; 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 &gt; 3 &amp;&amp; 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 &gt; 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 &lt; resources.length; ++i) {
 if (resources[i] != 'end') {
 return false;
 }
 }
 return true;
 }, function() {
 page.render(output);
 phantom.exit();
 }, 10000);
 }
 });
}
</code></pre>

blocks|key|311404|text|另一种方法是只要求PhantomJS在页面加载后等待一段时间，然后再进行呈现，根据常规的rasterize.js示例，但需要更长的超时以允许JavaScript完成额外资源的加载：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|311405|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+
++++}
});|code-block|syntax|javascript|311406|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/ariya/phantomjs/blob/master/examples/rasterize.js^0|18|C|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Another approach is to just ask PhantomJS to wait for a bit after the page has loaded before doing the render, as per the regular <a href="https://github.com/ariya/phantomjs/blob/master/examples/rasterize.js">rasterize.js</a> example, but with a longer timeout to allow the JavaScript to finish loading additional resources:

<pre><code>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 
 }
});
</code></pre>

blocks|key|311491|text|在我的程序中，我使用一些逻辑来判断它是否是onload:查看它的网络请求，如果在过去的200ms内没有新的请求，我就把它当作onload。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|311492|在onLoadFinish()之后使用它。|311493|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%2B%2B;
++++++++++++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;
++++++++}
++++}
}|code-block|syntax|javascript|311494|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

In my program, I use some logic to judge if it was onload: watching it's network request, if there was no new request on past 200ms, I treat it onload.

Use this, after onLoadFinish().

<pre><code>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 &amp;&amp; counter_retry &lt; 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 &lt; 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;
 }
 }
}
</code></pre>

blocks|key|311549|text|我发现这种方法在某些情况下很有用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|311550|page.onConsoleMessage(function(msg)+{
++//+do+something+e.g.+page.render
});|code-block|syntax|javascript|311551|如果你拥有这个页面，那么就在里面放一些脚本：|311552|<script>
++window.onload+=+function(){
++++console.log('page+loaded');
++}
</script>|311553|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I found this approach useful in some cases:

<pre><code>page.onConsoleMessage(function(msg) {
 // do something e.g. page.render
});
</code></pre>

Than if you own the page put some script inside:

<pre><code>&lt;script&gt;
 window.onload = function(){
 console.log('page loaded');
 }
&lt;/script&gt;
</code></pre>

blocks|key|311748|text|我发现这个解决方案在NodeJS应用程序中很有用。我只是在特殊情况下才使用它，因为它会启动一个超时，以便等待整个页面加载。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|311749|第二个参数是回调函数，该函数将在响应就绪时被调用。|311750|phantom+=+require('phantom');

var+fullLoad+=+function(anUrl,+callbackDone)+{
++++phantom.create(function+(ph)+{
++++++++ph.createPage(function+(page)+{
++++++++++++page.open(anUrl,+function+(status)+{
++++++++++++++++if+(status+!==+'success')+{
++++++++++++++++++++console.error("pahtom:+error+opening+"+%2B+anUrl,+status);
++++++++++++++++++++ph.exit();
++++++++++++++++}+else+{
++++++++++++++++++++//+timeOut
++++++++++++++++++++global.setTimeout(function+()+{
++++++++++++++++++++++++page.evaluate(function+()+{
++++++++++++++++++++++++++++return+document.documentElement.innerHTML;
++++++++++++++++++++++++},+function+(result)+{
++++++++++++++++++++++++++++ph.exit();+//+EXTREMLY+IMPORTANT
++++++++++++++++++++++++++++callbackDone(result);+//+callback
++++++++++++++++++++++++});
++++++++++++++++++++},+5000);
++++++++++++++++}
++++++++++++});
++++++++});
++++});
}

var+callback+=+function(htmlBody)+{
++++//+do+smth+with+the+htmlBody
}

fullLoad('your/url/',+callback);|code-block|syntax|javascript|311751|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I found this solution useful in a NodeJS app. 
I use it just in desperate cases because it launches a timeout in order to wait for the full page load. 

The second argument is the callback function which is going to be called once the response is ready. 

<pre><code>phantom = require('phantom');

var fullLoad = function(anUrl, callbackDone) {
 phantom.create(function (ph) {
 ph.createPage(function (page) {
 page.open(anUrl, function (status) {
 if (status !== 'success') {
 console.error("pahtom: error opening " + anUrl, status);
 ph.exit();
 } else {
 // timeOut
 global.setTimeout(function () {
 page.evaluate(function () {
 return document.documentElement.innerHTML;
 }, function (result) {
 ph.exit(); // EXTREMLY IMPORTANT
 callbackDone(result); // callback
 });
 }, 5000);
 }
 });
 });
 });
}

var callback = function(htmlBody) {
 // do smth with the htmlBody
}

fullLoad('your/url/', callback);
</code></pre>

blocks|key|528709|text|这是一个老生常谈的问题，但由于我在寻找完整的页面加载，而对于Spookyjs+(它使用casperjs和phantomjs)却没有找到我的解决方案，所以我为这个问题制作了自己的脚本，使用与用户deemstone相同的方法。这种方法的作用是，在给定的时间量内，如果页面没有接收或启动任何请求，它将结束执行。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|528710|在/usr/local/lib/node_modules/casperjs/modules/casper.js)文件(如果是全局安装的情况下，路径类似于casper.js+)中，添加以下行：|528711|在包含所有全局变量的文件顶部：|528712|var+waitResponseInterval+=+500
var+reqResInterval+=+null
var+reqResFinished+=+false
var+resetTimeout+=+function()+{}|code-block|syntax|javascript|528713|然后在函数"createPage(casper)“中，紧跟在"var+page+=+require('webpage').create();”之后添加以下代码：|528714|+resetTimeout+=+function()+{
+++++if(reqResInterval)
+++++++++clearTimeout(reqResInterval)

+++++reqResInterval+=+setTimeout(function(){
+++++++++reqResFinished+=+true
+++++++++page.onLoadFinished("success")
+++++},waitResponseInterval)
+}
+resetTimeout()|528715|然后在第一行的"page.onResourceReceived+=+function+onResourceReceived(OnResourceReceived)+{“中添加：|528716|+resetTimeout()|528717|对"page.onResourceRequested+=+function+onResourceRequested(requestData，request)+{“执行相同的操作|528718|最后，在第一行的"page.onLoadFinished+=+function+onLoadFinished(status)+{“中添加：|528719|+if(!reqResFinished)
+{
++++++return
+}
+reqResFinished+=+false|528720|就是这样，希望这个能帮助像我一样有麻烦的人。此解决方案适用于casperjs，但直接适用于Spooky。|528721|祝你好运！|528722|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|17|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|18|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|19|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Q|3|R|5|H|7|1B|8|@]|9|@]|A|$I|J]]|$1|S|3|T|5|6|7|1C|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1D|8|@]|9|@]|A|$]]|$1|W|3|X|5|H|7|1E|8|@]|9|@]|A|$I|J]]|$1|Y|3|Z|5|6|7|1F|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|1G|8|@]|9|@]|A|$]]|$1|12|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|13|$]]

This is an old question, but since I was looking for full page load but for Spookyjs (that uses casperjs and phantomjs) and didn't find my solution, I made my own script for that, with the same approach as the user deemstone .
What this approach does is, for a given quantity of time, if the page did not receive or started any request it will end the execution.

On casper.js file (if you installed it globally, the path would be something like /usr/local/lib/node_modules/casperjs/modules/casper.js) add the following lines:

At the top of the file with all the global vars:

<pre><code>var waitResponseInterval = 500
var reqResInterval = null
var reqResFinished = false
var resetTimeout = function() {}
</code></pre>

Then inside function "createPage(casper)" just after "var page = require('webpage').create();" add the following code:

<pre><code> resetTimeout = function() {
 if(reqResInterval)
 clearTimeout(reqResInterval)

 reqResInterval = setTimeout(function(){
 reqResFinished = true
 page.onLoadFinished("success")
 },waitResponseInterval)
 }
 resetTimeout()
</code></pre>

Then inside "page.onResourceReceived = function onResourceReceived(resource) {" on the first line add:

<pre><code> resetTimeout()
</code></pre>

Do the same for "page.onResourceRequested = function onResourceRequested(requestData, request) {"

Finally, on "page.onLoadFinished = function onLoadFinished(status) {" on the first line add:

<pre><code> if(!reqResFinished)
 {
 return
 }
 reqResFinished = false
</code></pre>

And that's it, hope this one helps someone in trouble like I was. This solution is for casperjs but works directly for Spooky.

Good luck !

blocks|key|311859|text|这是Supr答案的一个实现。此外，正如Mateusz+Charytoniuk建议的那样，它使用setTimeout而不是setInterval。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|311860|当没有任何请求或响应时，Phantomjs将在1000ms内退出。|311861|//+load+the+module
var+webpage+=+require('webpage');
//+get+timestamp
function+getTimestamp(){
++++//+or+use+Date.now()
++++return+new+Date().getTime();
}

var+lastTimestamp+=+getTimestamp();

var+page+=+webpage.create();
page.onResourceRequested+=+function(request)+{
++++//+update+the+timestamp+when+there+is+a+request
++++lastTimestamp+=+getTimestamp();
};
page.onResourceReceived+=+function(response)+{
++++//+update+the+timestamp+when+there+is+a+response
++++lastTimestamp+=+getTimestamp();
};

page.open(html,+function(status)+{
++++if+(status+!==+'success')+{
++++++++//+exit+if+it+fails+to+load+the+page
++++++++phantom.exit(1);
++++}
++++else{
++++++++//+do+something+here
++++}
});

function+checkReadyState()+{
++++setTimeout(function+()+{
++++++++var+curentTimestamp+=+getTimestamp();
++++++++if(curentTimestamp-lastTimestamp>1000){
++++++++++++//+exit+if+there+isn't+request+or+response+in+1000ms
++++++++++++phantom.exit();
++++++++}
++++++++else{
++++++++++++checkReadyState();
++++++++}
++++},+100);
}

checkReadyState();|code-block|syntax|javascript|311862|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

This is an implementation of Supr's answer. Also it uses setTimeout instead of setInterval as Mateusz Charytoniuk suggested.

Phantomjs will exit in 1000ms when there isn't any request or response.

<pre><code>// load the module
var webpage = require('webpage');
// get timestamp
function getTimestamp(){
 // or use Date.now()
 return new Date().getTime();
}

var lastTimestamp = getTimestamp();

var page = webpage.create();
page.onResourceRequested = function(request) {
 // update the timestamp when there is a request
 lastTimestamp = getTimestamp();
};
page.onResourceReceived = function(response) {
 // update the timestamp when there is a response
 lastTimestamp = getTimestamp();
};

page.open(html, function(status) {
 if (status !== 'success') {
 // exit if it fails to load the page
 phantom.exit(1);
 }
 else{
 // do something here
 }
});

function checkReadyState() {
 setTimeout(function () {
 var curentTimestamp = getTimestamp();
 if(curentTimestamp-lastTimestamp&gt;1000){
 // exit if there isn't request or response in 1000ms
 phantom.exit();
 }
 else{
 checkReadyState();
 }
 }, 100);
}

checkReadyState();
</code></pre>

blocks|key|528810|text|下面是我使用的代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|528811|var+system+=+require('system');
var+page+=+require('webpage').create();

page.open('http://....',+function(){
++++++console.log(page.content);
++++++var+k+=+0;

++++++var+loop+=+setInterval(function(){
++++++++++var+qrcode+=+page.evaluate(function(s)+{
+++++++++++++return+document.querySelector(s).src;
++++++++++},+'.qrcode+img');

++++++++++k%2B%2B;
++++++++++if+(qrcode){
+++++++++++++console.log('dataURI:',+qrcode);
+++++++++++++clearInterval(loop);
+++++++++++++phantom.exit();
++++++++++}

++++++++++if+(k+===+50)+phantom.exit();+//+10+sec+timeout
++++++},+200);
++});|code-block|syntax|javascript|528812|基本上，假设当给定元素出现在DOM上时，您应该知道页面已完全下载。因此，脚本将一直等待，直到发生这种情况。|528813|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

This the code I use:

<pre><code>var system = require('system');
var page = require('webpage').create();

page.open('http://....', function(){
 console.log(page.content);
 var k = 0;

 var loop = setInterval(function(){
 var qrcode = page.evaluate(function(s) {
 return document.querySelector(s).src;
 }, '.qrcode img');

 k++;
 if (qrcode){
 console.log('dataURI:', qrcode);
 clearInterval(loop);
 phantom.exit();
 }

 if (k === 50) phantom.exit(); // 10 sec timeout
 }, 200);
 });
</code></pre>

Basically given the fact you're supposed to know that the page is full downloaded when a given element appears on the DOM. So the script is going to wait until this happens.

blocks|key|528868|text|这是一个等待所有资源请求完成的解决方案。一旦完成，它将把页面内容记录到控制台，并生成呈现页面的屏幕截图。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|528869|虽然这个解决方案可以作为一个很好的起点，但我观察到它失败了，所以它绝对不是一个完整的解决方案！|528870|我使用document.readyState的时候运气不是很好。|offset|length|style|CODE|528871|我受到了phantomjs+examples+page上的waitfor.js示例的影响。|528872|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);
++if+(index+>+-1+&&+response.stage+===+'end')+{
++++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);
});|code-block|syntax|javascript|528873|entityMap|0|LINK|mutability|MUTABLE|url|http://phantomjs.org/examples/index.html|1|https://github.com/ariya/phantomjs/blob/master/examples/waitfor.js^0|0|0|3|J|0|4|N|0|T|A|1|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|12|8|@$F|13|G|14|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|15|8|@]|9|@$F|16|G|17|1|18]|$F|19|G|1A|1|1B]]|A|$]]|$1|L|3|M|5|N|7|1C|8|@]|9|@]|A|$O|P]]|$1|Q|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]|Y|$5|T|U|V|A|$W|Z]]]]

Here is a solution that waits for all resource requests to complete. Once complete it will log the page content to the console and generate a screenshot of the rendered page.
Although this solution can serve as a good starting point, I have observed it fail so it's definitely not a complete solution!
I didn't have much luck using <code>document.readyState</code>.
I was influenced by the <a href="https://github.com/ariya/phantomjs/blob/master/examples/waitfor.js" rel="nofollow noreferrer">waitfor.js</a> example found on the <a href="http://phantomjs.org/examples/index.html" rel="nofollow noreferrer" title="phantomjs examples page">phantomjs examples page</a>.
<pre><code>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);
 if (index &gt; -1 &amp;&amp; response.stage === 'end') {
 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);
});
</code></pre>

blocks|key|528918|text|我使用的是phantomjs+waitfor.js+example的个人混合。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|528919|这是我的main.js文件：|528920|'use+strict';

var+wasSuccessful+=+phantom.injectJs('./lib/waitFor.js');
var+page+=+require('webpage').create();

page.open('http://foo.com',+function(status)+{
++if+(status+===+'success')+{
++++page.includeJs('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js',+function()+{
++++++waitFor(function()+{
++++++++return+page.evaluate(function()+{
++++++++++if+('complete'+===+document.readyState)+{
++++++++++++return+true;
++++++++++}

++++++++++return+false;
++++++++});
++++++},+function()+{
++++++++var+fooText+=+page.evaluate(function()+{
++++++++++return+$('#foo').text();
++++++++});

++++++++phantom.exit();
++++++});
++++});
++}+else+{
++++console.log('error');
++++phantom.exit(1);
++}
});|code-block|syntax|javascript|528921|和lib/waitFor.js文件(这只是phantomjs+waitfor.js+example中waifFor()函数的复制和粘贴)：|528922|function+waitFor(testFx,+onReady,+timeOutMillis)+{
++++var+maxtimeOutMillis+=+timeOutMillis+?+timeOutMillis+:+3000,+//<+Default+Max+Timout+is+3s
++++++++start+=+new+Date().getTime(),
++++++++condition+=+false,
++++++++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+"+%2B+(new+Date().getTime()+-+start)+%2B+"ms.");
++++++++++++++++++++typeof(onReady)+===+"string"+?+eval(onReady)+:+onReady();+//<+Do+what+it's+supposed+to+do+once+the+condi>
++++++++++++++++++++clearInterval(interval);+//<+Stop+this+interval
++++++++++++++++}
++++++++++++}
++++++++},+250);+//<+repeat+check+every+250ms
}|528923|这个方法不是异步的，但至少我确信所有的资源在我尝试使用它们之前都被加载了。|528924|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/ariya/phantomjs/blob/master/examples/waitfor.js|1^0|F|A|F|I|0|0|4|7|0|0|1|E|V|A|1E|9|V|I|1|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@$9|14|A|15|1|16]]|E|$]]|$1|F|3|G|5|6|7|17|8|@$9|18|A|19|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|1A|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1B|8|@$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]]|D|@$9|1I|A|1J|1|1K]]|E|$]]|$1|O|3|P|5|J|7|1L|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1M|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|1N|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]|10|$5|V|W|X|E|$Y|Z]]]]

I use a personnal blend of the phantomjs <a href="https://github.com/ariya/phantomjs/blob/master/examples/waitfor.js" rel="nofollow"><code>waitfor.js</code> example</a>.

This is my <code>main.js</code> file:

<pre><code>'use strict';

var wasSuccessful = phantom.injectJs('./lib/waitFor.js');
var page = require('webpage').create();

page.open('http://foo.com', function(status) {
 if (status === 'success') {
 page.includeJs('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js', function() {
 waitFor(function() {
 return page.evaluate(function() {
 if ('complete' === document.readyState) {
 return true;
 }

 return false;
 });
 }, function() {
 var fooText = page.evaluate(function() {
 return $('#foo').text();
 });

 phantom.exit();
 });
 });
 } else {
 console.log('error');
 phantom.exit(1);
 }
});
</code></pre>

And the <code>lib/waitFor.js</code> file (which is just a copy and paste of the <code>waifFor()</code> function from the phantomjs <a href="https://github.com/ariya/phantomjs/blob/master/examples/waitfor.js" rel="nofollow"><code>waitfor.js</code> example</a>):

<pre><code>function waitFor(testFx, onReady, timeOutMillis) {
 var maxtimeOutMillis = timeOutMillis ? timeOutMillis : 3000, //&lt; Default Max Timout is 3s
 start = new Date().getTime(),
 condition = false,
 interval = setInterval(function() {
 if ( (new Date().getTime() - start &lt; maxtimeOutMillis) &amp;&amp; !condition ) {
 // If not time-out yet and condition not yet fulfilled
 condition = (typeof(testFx) === "string" ? eval(testFx) : testFx()); //&lt; 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(); //&lt; Do what it's supposed to do once the condi&gt;
 clearInterval(interval); //&lt; Stop this interval
 }
 }
 }, 250); //&lt; repeat check every 250ms
}
</code></pre>

This method is not asynchronous but at least am I assured that all the resources were loaded before I try using them.

blocks|key|312107|text|这是我的解决方案，它对我很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|312108|page.onConsoleMessage+=+function(msg,+lineNum,+sourceId)+{

++++if(msg=='hey+lets+take+screenshot')
++++{
++++++++window.setInterval(function(){++++++
++++++++++++try
++++++++++++{+++++++++++++++
+++++++++++++++++var+sta=+page.evaluateJavaScript("function(){+return+jQuery.active;}");+++++++++++++++++++++
+++++++++++++++++if(sta+==+0)
+++++++++++++++++{++++++
++++++++++++++++++++window.setTimeout(function(){
++++++++++++++++++++++++page.render('test.png');
++++++++++++++++++++++++clearInterval();
++++++++++++++++++++++++phantom.exit();
++++++++++++++++++++},1000);
+++++++++++++++++}
++++++++++++}
++++++++++++catch(error)
++++++++++++{
++++++++++++++++console.log(error);
++++++++++++++++phantom.exit(1);
++++++++++++}
+++++++},1000);
++++}+++++++
};


page.open(address,+function+(status)+{++++++
++++if+(status+!==+"success")+{
++++++++console.log('Unable+to+load+url');
++++++++phantom.exit();
++++}+else+{+
+++++++page.setContent(page.content.replace('</body>','<script>window.onload+=+function(){console.log(\'hey+lets+take+screenshot\');}</script></body>'),+address);
++++}
});|code-block|syntax|javascript|312109|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

this is my solution its worked for me .

<pre><code>page.onConsoleMessage = function(msg, lineNum, sourceId) {

 if(msg=='hey lets take screenshot')
 {
 window.setInterval(function(){ 
 try
 { 
 var sta= page.evaluateJavaScript("function(){ return jQuery.active;}"); 
 if(sta == 0)
 { 
 window.setTimeout(function(){
 page.render('test.png');
 clearInterval();
 phantom.exit();
 },1000);
 }
 }
 catch(error)
 {
 console.log(error);
 phantom.exit(1);
 }
 },1000);
 } 
};


page.open(address, function (status) { 
 if (status !== "success") {
 console.log('Unable to load url');
 phantom.exit();
 } else { 
 page.setContent(page.content.replace('&lt;/body&gt;','&lt;script&gt;window.onload = function(){console.log(\'hey lets take screenshot\');}&lt;/script&gt;&lt;/body&gt;'), address);
 }
});
</code></pre>

blocks|key|312182|text|在页面加载时做鼠标移动应该有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|312183|+page.sendEvent('click',200,+660);

do+{+phantom.page.sendEvent('mousemove');+}+while+(page.loading);|code-block|syntax|javascript|312184|更新|312185|提交表单时，未返回任何内容，因此程序停止。该程序没有等待页面加载，因为重定向开始需要几秒钟时间。|312186|告诉浏览器移动鼠标，直到主页的URL发生更改，浏览器就会有足够的时间进行更改。然后告诉它等待页面完成加载，允许页面在内容被抓取之前完全加载。|312187|page.evaluate(function+()+{
document.getElementsByClassName('btn+btn-primary+btn-block')[0].click();
});
do+{+phantom.page.sendEvent('mousemove');+}+while+(page.evaluate(function()
{
return+document.location+!=+"https://www.bestwaywholesale.co.uk/";
}));
do+{+phantom.page.sendEvent('mousemove');+}+while+(page.loading);|312188|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Do Mouse move while page is loading should work.
<pre><code> page.sendEvent('click',200, 660);

do { phantom.page.sendEvent('mousemove'); } while (page.loading);
</code></pre>
UPDATE
When submitting the form, nothing was returned, so the program stopped. The program did not wait for the page to load as it took a few seconds for the redirect to begin.
telling it to move the mouse until the URL changes to the home page gave the browser as much time as it needed to change. then telling it to wait for the page to finish loading allowed the page to full load before the content was grabbed.
<pre><code>page.evaluate(function () {
document.getElementsByClassName('btn btn-primary btn-block')[0].click();
});
do { phantom.page.sendEvent('mousemove'); } while (page.evaluate(function()
{
return document.location != &quot;https://www.bestwaywholesale.co.uk/&quot;;
}));
do { phantom.page.sendEvent('mousemove'); } while (page.loading);
</code></pre>

I'm using <a href="http://phantomjs.org/">PhantomJS</a> v1.4.1 to load some web pages. I don't have access to their server-side, I just getting links pointing to them. I'm using obsolete version of Phantom because I need to support Adobe Flash on that web pages.

The problem is many web-sites are loading their minor content async and that's why Phantom's onLoadFinished callback (analogue for onLoad in HTML) fired too early when not everything still has loaded. Can anyone suggest how can I wait for full load of a webpage to make, for example, a screenshot with all dynamic content like ads?

phantomjs not waiting for "full" page load

服务器

jQuery

JSON

我正在使用 v1.4.1加载一些网页。我不能访问他们的服务器端，我只能得到指向他们的链接。我使用的是过时的幻影版本，因为我需要在那些网页上支持Adobe Flash。问题是许多网站正在异步加载他们的次要内容，这就是为什么幻影的onLoadFinished回调(类似于HTML语言中的onLoad )在不是所有内容都还没有...

问phantomjs不等待“完整”页面加载
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问phantomjs不等待“完整”页面加载EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问phantomjs不等待“完整”页面加载
EN