Phantomjs在pageLoad完成后登录，重定向和呈现页面 [英] Phantomjs login, redirect and render page after pageLoad finishes

问题描述

我有一个带有登录表单的网站.如果未登录用户并尝试访问内部页面，它将被重定向到默认页面.例如，如果我尝试访问 http://siteURL.PhantomPrint.aspx我将被重定向到http://siteURL/Default.aspx?ReturnUrl=PhantomPrint.aspx.，登录后，将自动重定向到该页面.

I have a website with a login form. If a user is not logged and tries to access a internal page it will be redirected to the default page. For instance if I try to access http://siteURL.PhantomPrint.aspx I will be redirected to http://siteURL/Default.aspx?ReturnUrl=PhantomPrint.aspx. And after login an automatic redirect will take place to the page.

重定向后，我想用Phantomjs渲染页面并将其另存为pdf.问题是渲染发生在页面加载完成之前，并且只有在使用超时的情况下，我才能正确渲染页面.在这种情况下，如果页面加载时间比正常时间长，则生成的pdf不合适.

After the redirect I want to render the page with Phantomjs and save it as pdf. The problem is that the rendering takes place before page load is finished and I can properly render the page only if I use timeouts. In this case, if the page loading takes longer than normal the resulted pdf is not the proper one.

下面您可以找到Java脚本代码:

Below you can find the java script code:

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

欢迎任何有关如何确保仅在重定向页面完成加载后才进行渲染的建议.

Any suggestions on how I can assure that rendering is done only after the redirected page is finishing loading are welcomed.

推荐答案

您似乎要处理导航步骤.您需要使用 page.onNavigationRequested 来获取页面加载/重定向已发出.这可能很难维持.您还必须放弃将步数组与setInterval一起使用的想法.

It looks like you want to process navigation steps. You would need to use page.onNavigationRequested to pick up if a page load/redirect was issued. This will be likely hard to maintain. You would also have to discard the idea of using a step array with setInterval.

另一种可能性是使用 waitFor ，但是再说一次，这将使setInterval的使用成为不可能.

Another possibility would be to specifically wait for some selector that is present in the target page using waitFor, but then again, this would make the use of setInterval impossible.

CasperJS 实际上是建立在PhantomJS之上的，并使用步骤导航该网站.使用任何then*函数时，它将自动获取页面加载并等待页面加载完成，直到执行回调.

CasperJS is actually built on top of PhantomJS and uses steps to navigate the site. When you use any of the then* functions it will automatically pick up a page load and wait for page load finish until executing the callback.

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 .

这篇关于Phantomjs在pageLoad完成后登录，重定向和呈现页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！