phantomjsが「完全な」ページの読み込みを待機しない


137

PhantomJS v1.4.1を使用して一部のWebページをロードしています。私は彼らのサーバー側にアクセスできません、私はそれらを指すリンクを取得しています。そのWebページでAdobe Flashをサポートする必要があるため、私は古いバージョンのPhantomを使用しています。

問題は、多くのWebサイトがマイナーコンテンツを非同期で読み込んでいることです。そのため、PhantomのonLoadFinishedコールバック(HTMLでのonLoadのアナログ)が、まだすべてが読み込まれていないのに早く起動しました。たとえば、広告のようなすべての動的コンテンツを含むスクリーンショットを作成するために、Webページが完全に読み込まれるのを待つ方法を誰かが提案できますか?


3
答えを受け入れる時がきたと思います
スパルティク2018

回答:


76

別のアプローチは、単にページが通常のあたりなど、レンダリングを実行する前にロードされた後のビットを待つPhantomJSを依頼することですrasterize.jsの 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 
    }
});

1
はい、現在私はこのアプローチに固執しています。
nilfalse 2013

102
それは恐ろしい解決策です、申し訳ありません(それはPhantomJSのせいです!)。1秒待っても読み込みに20ミリ秒かかる場合、それは時間の無駄です(バッチジョブを考えてください)。1秒以上かかる場合でも失敗します。このような非効率性と信頼性の低さは、専門的な仕事には耐えられません。
CodeManX 2015

9
ここでの本当の問題は、JavaScriptがページのロードをいつ終了し、ブラウザもそれを認識しないかを決して知らないことです。サーバーから無限ループで何かをロードするJavaScriptがあるサイトを想像してください。ブラウザーの観点から-JavaScriptの実行が終了することはないので、phantomjsが終了したことを通知する瞬間は何ですか?この問題は、タイムアウトのソリューションを待機して最善を期待する場合を除いて、一般的なケースでは解決できません。
Maxim Galushka、2015

5
これは2016年の時点でまだ最善の解決策ですか?これ以上うまくやれるはずです。
Adam Thompson

6
読み取るコードを制御している場合は、ファントムjsコールバックを明示的に呼び出すことができます。phantomjs.org
Andy Smith

52

私はむしろ定期的に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するのをsetInterval防ぐ代わりに、ネストを使用しcheckReadyStateます。setTimeoutデフォルトの遅延は4ミリ秒です(https://stackoverflow.com/a/3580085/1011156)であるため、アクティブなポーリングがプログラムのパフォーマンスに大きく影響することはありません。

document.readyState === "complete"は、ドキュメントにすべてのリソースが完全に読み込まれることを意味します(https://html.spec.whatwg.org/multipage/dom.html#current-document-readiness)。


4
setTimeoutとsetIntervalに関するコメントは素晴らしいです。
Gal Bracha、2015

1
readyStateDOMが完全にロードされた後にのみトリガが、しかし任意のだろう<iframe>、それは本当に元の質問に答えるしないように要素がまだロードであってもよい
CodingIntrigue

1
@rgraham理想的ではありませんが、これらのレンダラーでできることは限られています。何かが完全にロードされているかどうかが分からないような、極端なケースもあるでしょう。コンテンツが意図的に1〜2分遅れているページを考えてみてください。レンダリングプロセスが待機し、不確定な時間待機するのは不合理です。遅いかもしれない外部ソースからロードされたコンテンツにも同じことが言えます。
ブランドンエリオット

3
これは、Backbone / Ember / Angularなど、DOMが完全に読み込まれた後のJavaScriptの読み込みを考慮しません。
Adam Thompson、

1
私にはまったく働きませんでした。readyState completeが発生した可能性がありますが、この時点ではページは空白でした。
Steve Staple 2017

21

waitforとラスタライズの例を組み合わせて試すことができます。

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

3
onLoadが発生した後もリソースは引き続き使用されるため、サーバープッシュテクノロジーを使用するWebページでは機能しないようです。
nilfalse 2013

ドライバーを実行します。ポルターガイスト、このような機能がありますか?
Jared Beck

waitForを使用してHTMLテキスト全体をポーリングし、定義されたキーワードを検索することは可能ですか?これを実装しようとしましたが、ポーリングが最新のダウンロードされたHTMLソースに更新されないようです。
fpdragon 2016

14

多分あなたはonResourceRequestedonResourceReceivedコールバックを使って非同期ロードを検出することができます。ドキュメントからこれらのコールバックを使用する例を次に示します

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実際の例を見ることができます。


しかし、この場合、PhantomJSの1つのインスタンスを使用して、一度に複数のページを読み込むことはできません。
nilfalse

onResourceRequestedはAJAX /クロスドメインリクエストに適用されますか?それとも、CSS、画像などにのみ適用されますか?
CMCDragonkai 2013

@CMCDragonkai私はそれを自分自身を使用したことがないが、に基づいて、このことはすべての要求を含んように思えます。引用:All the resource requests and responses can be sniffed using onResourceRequested and onResourceReceived
Supr

このメソッドを大規模なPhantomJSレンダリングで使用しましたが、非常にうまく機能します。リクエストを追跡し、リクエストが失敗したりタイムアウトしたりするかどうかを監視するには、多くのスマート機能が必要です。詳細:sorcery.smugmug.com/2013/12/17/using-phantomjs-at-scale
Ryan Doherty

14

これは、すべてのリソース要求が完了するのを待つソリューションです。完了すると、ページのコンテンツがコンソールに記録され、レンダリングされたページのスクリーンショットが生成されます。

このソリューションは良い出発点として役立ちますが、私はそれが失敗するのを観察したので、完全なソリューションではありません!

を使うのにあまり運がありませんでしたdocument.readyState

私はphantomjsの例のページにあるwaitfor.jsの例の影響を受けました。

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);
});


リクエスト配列から削除する前に、response.stageが「end」に等しいことを確認する必要があります。そうでない場合は、途中で削除される可能性があります。
レイマンド2017年

これは、WebページがDOMを動的にロードする場合は機能しません
Buddy

13

私のプログラムでは、いくつかのロジックを使用して、それがオンロードであるかどうかを判断します。ネットワークリクエストを監視し、過去200ミリ秒に新しいリクエストがない場合は、オンロードで扱います。

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;
        }
    }
}

11

私はこのアプローチがいくつかの場合に役立つと思いました:

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

ページを所有している場合は、スクリプトを中に入れます。

<script>
  window.onload = function(){
    console.log('page loaded');
  }
</script>

これは本当に良い回避策のように見えますが、HTML / JavaScriptページからログメッセージを取得してphantomJSを通過させることができませんでした...ブラウザコンソールでメッセージを完全に表示できる間、onConsoleMessageイベントはトリガーされません理由がわかりません。
Dirk

1
page.onConsoleMessage = function(msg){}が必要でした。
アンディ

5

このソリューションはNodeJSアプリで役立ちます。完全なページの読み込みを待つためにタイムアウトを起動するため、私は絶望的な状況でのみ使用します。

2番目の引数は、応答の準備ができると呼び出されるコールバック関数です。

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);

3

これは、Suprの回答の実装です。また、Mateusz Charytoniukが示唆したように、setIntervalではなくsetTimeoutを使用します。

Phantomjsは、リクエストまたはレスポンスがない場合、1000ミリ秒で終了します。

// 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();

3

これは私が使用するコードです:

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);
  });

基本的に、特定の要素がDOMに表示されたときにページが完全にダウンロードされることを知っているはずです。したがって、スクリプトはこれが発生するまで待機します。


3

私はphantomjs waitfor.jsサンプルの個人的なブレンドを使用しています。

これは私のmain.jsファイルです:

'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);
  }
});

そしてlib/waitFor.jsファイル(これはwaifFor()phantomjsのwaitfor.jsからの関数の単なるコピーと貼り付けです):

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 " + (new Date().getTime() - start) + "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
}

このメソッドは非同期ではありませんが、少なくとも、使用する前にすべてのリソースがロードされていることを確認しています。


2

これは古い質問ですが、全ページの読み込みを探していたが(casperjsとphantomjsを使用する)Spookyjsを探していて、自分の解決策が見つからなかったため、ユーザーdeemstoneと同じアプローチで独自のスクリプトを作成しました。このアプローチが行うことは、一定期間、ページが要求を受信または開始しなかった場合、実行を終了することです。

casper.jsファイル(グローバルにインストールした場合、パスは/usr/local/lib/node_modules/casperjs/modules/casper.jsなど)に次の行を追加します。

すべてのグローバル変数を含むファイルの先頭:

var waitResponseInterval = 500
var reqResInterval = null
var reqResFinished = false
var resetTimeout = function() {}

次に、「var page = require( 'webpage')。create();」の直後の「createPage(casper)」関数内 次のコードを追加します。

 resetTimeout = function() {
     if(reqResInterval)
         clearTimeout(reqResInterval)

     reqResInterval = setTimeout(function(){
         reqResFinished = true
         page.onLoadFinished("success")
     },waitResponseInterval)
 }
 resetTimeout()

次に、最初の行の "page.onResourceReceived = function onResourceReceived(resource){"内に以下を追加します:

 resetTimeout()

「page.onResourceRequested = function onResourceRequested(requestData、request){」についても同じことを行います

最後に、「page.onLoadFinished = function onLoadFinished(status){」の最初の行に次の行を追加します。

 if(!reqResFinished)
 {
      return
 }
 reqResFinished = false

これで終わりです。これが私と同じように問題のある人を助けることを願っています。このソリューションはcasperjs用ですが、Spookyで直接機能します。

幸運を !


0

これは私の解決策です。

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);
    }
});
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.