页面加载完成后，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

看起来您想要处理导航步骤。您需要使用 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 变得更小。 .