Question

我正在尝试按顺序打开2个角度应用页面以使用phantomjs获取屏幕截图。第1页需要在第2页之前打开，因为它为第2页准备了一些数据。我以下列方式使用两个嵌套的setTimeout()函数：

var page = require('webpage').create(),
  t, url;

phantom.addCookie({
  'name': 'token',
  'value': '<authentication-token-goes-here>',
  'domain': 'localhost'
});

t = Date.now();
url = "http://localhost:8000/#/page1";

page.onConsoleMessage = function(msg, lineNum, sourceId) {
  console.log('CONSOLE: ' + msg + ' (from line #' + lineNum + ' in "' + sourceId + '")');
};

page.viewportSize = {
  width: 1366,
  height: 768
};

page.clipRect = {
  top: 0,
  left: 0,
  width: 1366,
  height: 768
};

page.open(url, function(status) {

  setTimeout(function() {

    console.log('page 1 status: ', status);
    page.render("page1.png");

    var url = "http://localhost:8000/#/page2";

    page.open(url, function(status) {
      console.log('page 2 status: ', status);
      setTimeout(function() {
        page.render("page2.png");
        phantom.exit();
      }, 5000);
    });
  }, 5000);
});

第一个控制台语句：console.log('page 1 status: ', status);被打印，我获得了第1页的应用程序日志和屏幕截图，但第二个控制台日志（第2页状态）没有打印，因为内部{{1没有调用回调函数。它还会挂起控制台本身，因为由于未调用回调而未调用page.open()。

但即使没有调用内部phantom.exit()回调，我也可以看到第2页的应用程序日志（如XHR响应日志）已成功打印！只是在第2页的最后一个应用程序日志之后没有活动。

我尝试了这个代码与其他网站（按顺序打开谷歌和Facebook），它工作正常。但相同的代码不适用于我的角度应用程序。可能是什么原因？

Answer 1

好的，我可以复制这个问题，这里是AngularJS中使用路由的一些代码：

＆＃13;

var routingExample = angular.module('Example.Routing', []);
routingExample.controller('HomeController', function($scope) {});
routingExample.controller('BlogController', function($scope) {});

routingExample.config(function($routeProvider) {
  $routeProvider.
  when('/home', {
    templateUrl: 'home.html',
    controller: 'HomeController'
  }).
  when('/blog', {
    templateUrl: 'blog.html',
    controller: 'BlogController'
  }).
  otherwise({
    redirectTo: '/home'
  });
});

＆＃13;

<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">

  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.min.js"></script>
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <title>AngularJS Routing</title>

  <script type="text/javascript" src="script.js"></script>
</head>

<body ng-app="Example.Routing" class="ng-scope">
  <script type="text/ng-template" id="home.html">
    <h1>Home</h1>
  </script>
  <script type="text/ng-template" id="blog.html">
    <h1>Blog</h1>
  </script>

  <div>
    AngularJS Routing

    <div>
      <a href="#/home">Home</a>
      <a href="#/blog">Blog</a>
    </div>

    <div ng-view></div>
  </div>
</body>

</html>

＆＃13;

路由器在URL中使用#，这意味着当您在phantomJS中运行page.open时，它不会强制重新加载（类似于标准浏览器行为）。因此phantomJS没有异步任务要做，也不会调用任何回调。一种方法是在设置新URL时使用第二页对象或强制重新加载。但是我想你不想这样做。这就是我所做的（那是我的幻影剧本）：

＆＃13;

var page = require('webpage').create(),
  t, url;

phantom.addCookie({
  'name': 'token',
  'value': '<authentication-token-goes-here>',
  'domain': 'localhost'
});

t = Date.now();
url = 'http://localhost:8080/#/home';

page.onConsoleMessage = function(msg, lineNum, sourceId) {
  console.log('CONSOLE: ' + msg + ' (from line #' + lineNum + ' in "' + sourceId + '")');
};

page.viewportSize = {
  width: 1366,
  height: 768
};

page.clipRect = {
  top: 0,
  left: 0,
  width: 1366,
  height: 768
};

page.open(url, function(status) {

  setTimeout(function() {

    console.log('page 1 status: ', status);
    page.render('page1.png');
    console.log('page1.png rendered');

    console.log('moving to the second page ' + url);
    page.onUrlChanged = function(targetUrl) {
      console.log('URL changed, New URL: ' + targetUrl);
      console.log(page.url);
      if (targetUrl !== 'http://localhost:8080/#/home') { // the default page
        setTimeout(function() {
          page.render('page2.png');
          phantom.exit();
        }, 1000);
      }
    };

    console.log('onUrlChanged callback handler set up');

    var url = 'http://localhost:8080/#/blog';
    console.log('opening the ' + url);
    page.open(url, function(status) {});

  }, 1000);
});

＆＃13;

截图：

按顺序打开角度应用页面 - 第二页。打开回调不会被调用

1 个答案: