Phantomjs登錄，重定向和頁面後頁面完成

Question

我有一個網站與登錄表單。如果用戶沒有登錄並嘗試訪問內部頁面，它將被重定向到默認頁面。例如，如果我嘗試訪問 http://siteURL.PhantomPrint.aspx我將被重定向到http://siteURL/Default.aspx?ReturnUrl=PhantomPrint.aspx.並且登錄後會自動重定向到頁面。

在重定向後，我想用Phantomjs呈現頁面並將其保存爲pdf。問題是渲染髮生在頁面加載完成之前，我只能使用超時才能正確渲染頁面。在這種情況下，如果頁面加載比正常時間更長，則導致的pdf不是正確的。

下面你可以找到Java腳本代碼：

var page = require('webpage').create(); 
var index = 0, 

page.onConsoleMessage = function (msg) { 
    console.log(msg); 
}; 

var steps = [ 
    function() { 
     //Load Login Page 
     page.open("http://siteURL.PhantomPrint.aspx", function() { 
      //Enter Credentials 
      page.evaluate(function() { 
       console.log("filling inputs"); 

      var usernameInput = document.getElementById("txtUsername"); 
      usernameInput.value = "user"; 

      var passwordInput = document.getElementById("txtPassword"); 
      passwordInput.value = "password"; 

      var loginButton = document.getElementById("btnLogin"); 
      loginButton.click(); 

      console.log("login button was submitted"); 
     }); 
    }); 
    }, 

    function() { 
      // page.onLoadFinished = function() { 
       // Render the page to pdf 
       page.render('example.png'); 
       phantom.exit(); 
       console.log("rendering finished"); 
      //}); 
     } 
    ]; 


    interval = setInterval(function() { 
     if (!loadInProgress && typeof steps[testindex] == "function") { 
      console.log("step " + (testindex + 1)); 
      steps[testindex](); 
      testindex++; 
     } 
     if (typeof steps[testindex] != "function") { 
      console.log("test complete!"); 
      phantom.exit(); 
     } 
    }, 1000); 

我如何能保證渲染任何建議只重定向頁面加載完成，歡迎後進行。

Answer 1

經過更多的研究，我找到了一個解決方案，見下面的代碼。

var loadInProgress = false; 

page.onLoadStarted = function() { 
    loadInProgress = true; 
    console.log("load started"); 
}; 

page.onLoadFinished = function() { 
    loadInProgress = false; 
    console.log("load finished"); 
}; 

interval = setInterval(function() { 
    if (!loadInProgress && typeof steps[testindex] == "function") { 
     console.log("step " + (testindex + 1)); 
     steps[testindex](); 
     testindex++; 
    } 
    if (typeof steps[testindex] != "function") { 
     console.log("test complete!"); 
     phantom.exit(); 
    } 
}, 100) 

但我想知道是否沒有其他解決方案不會涉及遞歸函數調用。

Answer 2

它看起來像你想處理導航步驟。如果發佈頁面加載/重定向，您將需要使用page.onNavigationRequested。這很可能難以維持。您還必須放棄使用步驟數組setInterval的想法。

另一種可能性是使用waitFor專門等待目標頁面中存在的某個選擇器，但是這樣會再次使得setInterval無法使用。

---

CasperJS實際上是建立在PhantomJS的頂部，並使用步驟導航網站。當您使用任何then*函數時，它將自動獲取頁面加載並等待頁面加載完成，直到執行回調。

var casper = require('casper').create(); 

casper.on("remote.message", function (msg) { 
    console.log(msg); 
}); 

casper.start("http://siteURL/PhantomPrint.aspx", function() { 
    //Enter Credentials 
    this.evaluate(function() { 
     console.log("filling inputs"); 

     var usernameInput = document.getElementById("txtUsername"); 
     usernameInput.value = "user"; 

     var passwordInput = document.getElementById("txtPassword"); 
     passwordInput.value = "password"; 
    }); 
    this.click("#btnLogin"); 
    this.echo("login button was submitted"); 
}); 
casper.then(function() { 
    this.capture('example.png'); 
}); 
casper.run(); 

這可以通過使用casper.fillSelectors更小。