标签: single-page-application

在angularJS单页面应用程序中使用javascript打印div

我有一个使用angularJS的单页Web应用程序.我需要打印某个页面的div.我尝试了以下方法:

该页面包含几个div(print.html)

<div>
  <div>
    Do not print
  </div>
  <div id="printable">
    Print this div
  </div>
  <button ng-click="printDiv('printableArea');">Print Div</button>
</div>
Run Code Online (Sandbox Code Playgroud)

控制器有以下脚本:

$scope.printDiv = function(divName) {
    var printContents = document.getElementById(divName).innerHTML;
    var originalContents = document.body.innerHTML;        
    document.body.innerHTML = printContents;
    window.print();
    document.body.innerHTML = originalContents;
}
Run Code Online (Sandbox Code Playgroud)

此代码打印所需的div但存在问题.该声明document.body.innerHTML = originalContents;取代了整个申请的正文,因为它是一个SPA.因此,当我刷新页面或再次单击打印按钮时,页面的整个内容都将被删除.

html javascript printing angularjs single-page-application

33
推荐指数
3
解决办法
11万
查看次数

可以使用Cloudflare缓存和保护REST API吗?

我正在设计一个RESTful API,旨在供单页应用程序和本机移动应用程序使用.此API的某些调用会返回可以缓存一段时间的公开结果.此外,需要速率保护来保护API免受未经授权的用户(蜘蛛)

我可以使用Cloudflare为我的RESTful API实现缓存和速率限制/ DDOS保护吗?

缓存: Cloudflare 支持HTTP缓存控制头,因此API可以决定通过GET请求的每个实体是否公开以及缓存多长时间.

  • 但是,目前尚不清楚缓存控制头是否也下游传递给客户端,因此还会触发浏览器缓存响应?这可能是不可取的,因为它可能使故障排除更加困难
  • Akamai有一个Edge-Control标头,可确保内容缓存在CDN中而不是浏览器中.可以用Cloudflare做类似的事吗?

DDOS保护: Cloudflare支持有一篇文章建议对后端API禁用DDOS保护,但这不适用于我的用例,即每个客户端应该向API发出少量请求.本机DDOS保护实际上符合我保护API免受机器人攻击的要求.

  • 我需要知道如何以编程方式检测Cloudflare何时服务于Captcha/我受到攻击等页面这将允许SPA /移动应用程序智能地做出反应,并将用户重定向到Web视图,在那里她可以演示她" hummanness".

  • 从Cloudflare文档中,显示DDOS质询时发送的HTTP状态代码并不明显.绕过Cloudflare DDOS保护的开源云计算器似乎表明Captcha和挑战页面的HTTP状态为200. 有没有比解析请求体更好的方法来确定是否启动了DDOS保护?

  • Cloudflare 显然使用cookie记录谁成功解决了Captcha.这显然会增加本机应用程序的额外复杂性.在挑战解决后,有没有一种方法可以将Cloudflare会话cookie转移回本机应用程序?

可能这是一个先进的Cloudflare用例 - 但我认为它很有前途,并且很高兴听到有人有这样的经历(在Cloudflare或其他CDN上).

rest caching ddos cloudflare single-page-application

33
推荐指数
3
解决办法
8599
查看次数

[ngClass]与[class]绑定之间的区别

以下片段之间Angular 2的区别是什么:

<div [class.extra-sparkle]="isDelightful">
<div [ngClass]="{'extra-sparkle': isDelightful}">
Run Code Online (Sandbox Code Playgroud)

single-page-application angular-ng-class angular2-directives angular

33
推荐指数
6
解决办法
2万
查看次数

vue.js - 组织具有多个视图的大型单页面应用程序

我正在玩新的MVVM框架 - Vue.js(http://vuejs.org/).

这在简单的示例和演示中非常好,但现在我正在尝试使用多个视图创建大型SPA,并且我意识到框架的文档中没有描述如何执行它的最佳模式.

主要问题是我不知道如何处理不同路径上的视图.

例如,我使用Director(https://github.com/flatiron/director)进行路由,但是如何更改视图?

var booksCtrl = function () {
   var booksViewModel = new Vue({
       el: '#books'
       data: { ... }
       ready: function () {
          // hide previous ViewModel and display this one??
       }
   });
};

var editBookCtrl = function (id) { 
   var editBookViewModel = new Vue({
       el: '#editBook'
       data: { ... }
       ready: function () {
          // hide previous ViewModel and display this one??
       }
   });
};

var routes = …
Run Code Online (Sandbox Code Playgroud)

javascript router viewmodel single-page-application vue.js

32
推荐指数
2
解决办法
2万
查看次数

Google Analytics:如何在单页应用中跟踪网页?

目前在我的网站上,我使用HTML5 pushState()popState链接来提高速度.但是,这并没有真正改变真实的网址,看起来它会影响并搞乱谷歌分析的代码.(不显示网址更改)是否有可能的解决方案?谢谢,

javascript html5 google-analytics web-applications single-page-application

31
推荐指数
5
解决办法
1万
查看次数

淘汰'闪烁'问题

我正在使用KO构建SPA(单页应用程序).应用程序看起来像一本书,用户可以翻页.

问题是,每次页面加载时,页面都会闪烁,并且用户会看到页面没有样式的版本.我想这是由于很多样式依赖于ko绑定这一事实所以直到ko完成它"魔术",用户才能看到没有样式的代码.

是否有可能告诉KO何时完成所有绑定并且只显示页面?

我已经设法通过在加载视图之前设置超时来部分解决它,但当然这不是一个好的解决方案.

javascript singlepage knockout.js single-page-application

31
推荐指数
1
解决办法
6593
查看次数

如何禁用通过IIS提供的单页面应用程序HTML文件的缓存?

我有一个单页面应用程序(angular-js),它通过IIS提供.如何防止HTML文件的缓存?需要通过更改index.html或web.config中的内容来实现解决方案,因为无法通过管理控制台访问IIS.

我目前正在调查的一些选项是:

IIS是带有.NET framework 4的7.5版

asp.net iis caching angularjs single-page-application

30
推荐指数
6
解决办法
3万
查看次数

Spring捕获index.html的所有路由

我正在开发一个基于反应的单页面应用程序的弹簧后端,我正在使用react-router进行客户端路由.

在index.html页面旁边,后端提供路径上的数据/api/**.

为了从我的应用程序src/main/resources/public/index.html的根路径上提供我的index.html,/我添加了一个资源处理程序

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/").addResourceLocations("/index.html");
}
Run Code Online (Sandbox Code Playgroud)

我想要的是在没有其他路由匹配的情况下提供index.html页面,例如当我调用除了以外的路径时/api.

如何在春季配置这种全能路线?

spring spring-mvc catch-all single-page-application spring-boot

30
推荐指数
4
解决办法
2万
查看次数

检测单页应用程序上的应用程序版本更改

今天提出了一个问题,我没有明确的答案.

假设我们连接并缩小所有资源文件(CSS和Javascript)并在"Master-Page"中声明它们.

在多页面应用程序中,如果CSS文件发生更改,它将在下一次整页加载时重新充值.

在单页面应用程序中,用户可以继续工作数天,并且永远不会为声明CSS文件的主页面充电.在发出Ctrl-F5之前,用户永远不会看到更改.

我敢肯定有人已经想到这一点,并有经验分享:)

对我来说,使用WebSockets不是一种选择.首先是因为它太过分,因为并非所有客户都支持这项技术.同样的原因也适用于所有WebSocket后备......因此我不会继续打我的服务器.

那么,任何人的想法?:)

顺便说一句,我们正在使用AngularJS,如果它可以帮助一个特定的解决方案.

谢谢!

javascript versioning angularjs single-page-application

29
推荐指数
1
解决办法
8473
查看次数

在OAuth2隐式授权中处理过期的访问令牌

OAuth2的规范规定授权服务器在使用隐式授权时不得发出刷新令牌.在我们的用例中,我们使用OAuth2保护RESTful API,并使用单页Javascript应用程序作为此API的客户端.由于在访问令牌过期后重定向到授权服务器非常困难,我们正在寻找更好的方法来获取新的有效令牌.我可以考虑两种不同的方法,并想知道哪一种可能更好:

  1. 使用隐藏的iframe重新请求有效的访问令牌.为此,必须包含一个参数,例如"prompt = none",它告诉OAuth提供者既不挑战认证,也不显示授权页面.如果用户已通过身份验证并已授权应用程序,则服务器将在URL#parameters中发回访问令牌.如果未满足上述条件之一,它将重定向,并出现错误,如#error = authentication%20lost.通过这种行为,我们可以使用具有隐式流的短期访问令牌.

  2. 我们可以使用一个额外的范围(例如离线)来告诉服务器分发刷新令牌.即使原始规范说隐式流不会发出刷新令牌(如果客户端仅将OAuth用于第一次授权,这是正确的),您可以自由地为您的特定应用程序定义自己的作用域.您应该考虑仅允许来自知名客户端的此范围.

这两种方法都与OpenID Connect非常相似.不幸的是,目前OpenID Connect的实现并不多.因此,第一步是扩展OAuth2服务器,直到OIC更受欢迎.

那么哪种方法应该首选?

编辑:令牌端点需要客户端身份验证,这仅适用于机密客户端,如服务器端应用程序.使用第二种方法,只有在我们的情况下,RESTful API才能使资源提供者刷新令牌并将其发送回客户端.我认为这会带来安全风险.所以我们可能只有一种有效的方法.

restful-authentication single-sign-on oauth-2.0 single-page-application

29
推荐指数
1
解决办法
7984
查看次数