javascript - 按顺序打开 Angular 应用程序页面 - 第二个 page.open 回调不会被调用

coder 2025-01-10 原文

我正在尝试依次打开 2 个 Angular 应用程序页面，以使用 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 页) status) 不会被打印出来，因为内部 page.open() 的回调没有被调用。它还会挂起控制台本身，因为 phantom.exit() 由于未调用回调而未被调用。

但即使没有调用内部 page.open() 回调，我也可以看到第 2 页的应用程序日志(如 XHR 响应日志)成功打印!只是在第 2 页的最后一个应用程序日志之后没有任何事件。

我在其他网站上尝试了这段代码(依次打开 google 和 facebook)，效果很好。但是相同的代码不适用于我的 Angular 应用程序。可能是什么原因？

最佳答案

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

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

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

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

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

截图:

关于javascript - 按顺序打开 Angular 应用程序页面 - 第二个 page.open 回调不会被调用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43111235/

javascript Angular 39 page 34 angularjs phantomjs

有关javascript - 按顺序打开 Angular 应用程序页面 - 第二个 page.open 回调不会被调用的更多相关文章

ruby - 将差异补丁应用于字符串/文件 - 2
对于具有离线功能的智能手机应用程序，我正在为Xml文件创建单向文本同步。我希望我的服务器将增量/差异(例如GNU差异补丁)发送到目标设备。这是计划:Time=0Server:hasversion_1ofXmlfile(~800kiB)Client:hasversion_1ofXmlfile(~800kiB)Time=1Server:hasversion_1andversion_2ofXmlfile(each~800kiB)computesdeltaoftheseversions(=patch)(~10kiB)sendspatchtoClient(~10kiBtransferred)Cl
ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2
使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？最佳答案你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta
ruby-on-rails - Rails 应用程序之间的通信 - 2
我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此
ruby - 无法运行 Rails 2.x 应用程序 - 2
我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r
ruby - Highline 询问方法不会使用同一行 - 2
设置:狂欢ruby1.9.2高线(1.6.13)描述:我已经相当习惯在其他一些项目中使用highline，但已经有几个月没有使用它了。现在，在Ruby1.9.2上全新安装时，它似乎不允许在同一行回答提示。所以以前我会看到类似的东西:require"highline/import"ask"Whatisyourfavoritecolor?"并得到:Whatisyourfavoritecolor?|现在我看到类似的东西:Whatisyourfavoritecolor?|竖线(|)符号是我的终端光标。知道为什么会发生这种变化吗？最佳答案
ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗？ - 2
刚入门rails，开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗？有哪些用例。您如何为Rails应用程序使用应用程序Controller？我不想在那里放太多代码，因为据我了解，每个请求都会调用此Controller。这是真的？最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度，尽管在某些情况下ApplicationContr
ruby-on-rails - 项目升级后 Pow 不会更改 ruby 版本 - 2
我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby版本(从1.9.3到2.0.0，我使用RVM)当我切换ruby版本、安装所有gem依赖项时，我通过运行railss并访问localhost:3000确保该应用程序正常运行以前，我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后，由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0，此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘
ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby 变量的内容？ - 2
我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。最佳答案您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R
使用 ACL 调用 upload_file 时出现 Ruby S3 "Access Denied"错误 - 2
我正在尝试编写一个将文件上传到AWS并公开该文件的Ruby脚本。我做了以下事情:s3=Aws::S3::Resource.new(credentials:Aws::Credentials.new(KEY,SECRET),region:'us-west-2')obj=s3.bucket('stg-db').object('key')obj.upload_file(filename)这似乎工作正常，除了该文件不是公开可用的，而且我无法获得它的公共(public)URL。但是当我登录到S3时，我可以正常查看我的文件。为了使其公开可用，我将最后一行更改为obj.upload_file(file
c# - 如何在 ruby 中调用 C# dll？ - 2
如何在ruby中调用C#dll？最佳答案我能想到几种可能性:为您的DLL编写(或找人编写)一个COM包装器，如果它还没有，则使用Ruby的WIN32OLE库来调用它；看看RubyCLR,其中一位作者是JohnLam，他继续在Microsoft从事IronRuby方面的工作。(估计不会再维护了，可能不支持.Net2.0以上的版本)；正如其他地方已经提到的，看看使用IronRuby，如果这是您的技术选择。有一个主题是here.请注意，最后一篇文章实际上来自JohnLam(看起来像是2009年3月)，他似乎很自在地断言RubyCL

javascript - 按顺序打开 Angular 应用程序页面 - 第二个 page.open 回调不会被调用

有关javascript - 按顺序打开 Angular 应用程序页面 - 第二个 page.open 回调不会被调用的更多相关文章

随机推荐