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更小。