以下のコードでは、Phantom.jsがページを読み込み、ボタンをクリックして5秒間待ってから、ページのHTMLコードを返します。
問題:ただし、setTimeout()
を使用して5秒の遅延を作成すると、_page.evaluate
_関数はHTMLではなくコールバック関数にnull
を返します。
_myUrl = 'http://www.google.com'
var phantom = Meteor.npmRequire('phantom')
phantom.create = Meteor.wrapAsync(phantom.create)
phantom.create( function(ph) {
ph.createPage = Meteor.wrapAsync(ph.createPage)
ph.createPage(function(page) {
page.open = Meteor.wrapAsync(page.open)
page.open(listingUrl, function(status) {
console.log('Page loaded')
page.evaluate = Meteor.wrapAsync(page.evaluate)
page.evaluate(function() {
// Find the button
var element = document.querySelector( '.search-btn' );
// create a mouse click event
var event = document.createEvent( 'MouseEvents' );
event.initMouseEvent( 'click', true, true, window, 1, 0, 0 );
// send click to element
element.dispatchEvent( event );
// Give page time to process Click event
setTimeout(function() {
// Return HTML code
return document.documentElement.outerHTML
}, 5000)
}, function(html) {
// html is `null`
doSomething()
})
})
})
})
_
setTimeout()
をMeteor.setTimeout()
に置き換えると、別のエラーが発生します。
_phantom stdout: ReferenceError: Can't find variable: Meteor
_
page.evaluate()
は、PhantomJSのサンドボックス化されたページコンテキストです。外部で定義された変数にはアクセスできません。タイムアウトが必要な場合は、非同期関数から何も返すことができないため、page.evaluate()
を2回呼び出す必要があります( 説明 ):
_page.evaluate(function() {
...
element.dispatchEvent( event );
}, function() {
setTimeout(function() {
page.evaluate(function() {
return document.documentElement.outerHTML
}, function(html) {
doSomething()
})
}, 5000)
})
_
2番目のpage.evaluate()
呼び出しを使用する代わりに、定義されているコンテンツに直接アクセスすることでコードを短縮できます ここ :
_setTimeout(function() {
page.get("content", function(content) {
doSomething()
})
}, 5000)
_
これは優れたソリューションではありませんが、ボタンのクリックとフォームの送信でページの変更を処理するだけの場合に機能します。 page.open()の外部で関数変数を宣言し、後でそれらを内部でページ評価関数に割り当てるだけです。 onLoadFinishedは、ボタンのクリックによる変更でページがリロードされた後に呼び出され、再度評価できます。
var loadInProgress = false,
jurl = 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js',
page = require('webpage').create();
// declare variables outside page.open and assign them later inside
var evalPageFunc;
// assign callbacks which will be called by phantom
page.onLoadStarted = function() {
loadInProgress = true;
console.log('load started');
};
page.onLoadFinished = function() {
loadInProgress = false;
console.log('load finished');
if (evalPageFunc) {
// since the page has loaded we can safely evaluate it
var mydata = evalPageFunc();
console.log(mydata);
if (!mydata.havemore) {
phantom.exit();
// or next url
}
}
};
page.open(url, function(status) {
page.includeJs(jurl, function(){
// define your page evaluating functions
evalPageFunc = function(){
return page.evaluate(function() {
var datafromhtml = {}, havemoretoclick = true;
// get your data and perform clicks if you want to
// datafromhtml.somedata = $('stealme').text();
// $("clickme").click();
return {
havemore: havemoretoclick,
data: datafromhtml
};
});
}
var k = evalPageFunc();
});
});
きれいではありませんが、機能します。