文档章节

angular4后台系统控制浏览器回退登录页面操作

SubinY
 SubinY
发布于 2017/08/30 14:12
字数 468
阅读 546
收藏 0
点赞 0
评论 0

 其实我就想记录这一段代码,方便日后做单页面应用阻止用户通过浏览器回退登录页面。其中popstate是用户操作前进后退的事件源,外面的是初始化整个程序只调用一次,用于记录modules页面

ngAfterViewInit() {
    if (window.history && window.history.pushState) {
        $(window).on('popstate',  ()=>{
            window['history'].pushState('forward', '', 'modules');
            window['history'].forward();
        });
    }
    window['history'].pushState('forward', '', 'modules'); //在初始化阶段必须得有这两行控制
    window['history'].forward();
}

为何我例子中直接用history.state为‘forward’,因为只是简单记录一个值,而且该值没什么意义就是一个参数而已

不要浪费空白,也来解释一下H5的新东西 history state/pushState/replaceState

history.state

解释:

当前URL下对应的状态信息。如果当前URL不是通过pushState或者replaceState产生的,那么history.state是null。

history.pushState

解释:

将当前URL和history.state加入到history中,并用新的state和URL替换当前。不会造成页面刷新。

用法:

history.pushState(state, title, url);  

参数解释:

state:与要跳转到的URL对应的状态信息(eg: forward, back)。

title:不知道干啥用,传空字符串就行了。

url:要跳转到的URL地址,必须同源不能跨域。

history.replaceState

解释:

用新的state和URL替换当前。不会造成页面刷新。

用法:

history.replaceState(state, title, url);  

参数解释:同上

 

window onPopstate事件

调用history.back()、history.forward()、history.go()等方法,会触发popstate事件,单纯调用pushState()或replaceState()不触发popstate事件。

兼容性问题

pushState直到IE10才被支持,在早版本的IE中只能通过修改window.location=”#foo”完成,但这样会触发hashchange事件。

 

参考:

利用pushState开发无刷页面切换

ajax与HTML5 history pushState/replaceState实例

pjax是ajax+pushState的封装,同时支持本地存储、动画等多种功能

 

© 著作权归作者所有

共有 人打赏支持
SubinY
粉丝 8
博文 86
码字总数 63997
作品 0
佛山
程序员
购物车的设计

本文中的商品没有活动,价格可以通过后台管理系统控制调节. 初始化本地购物车 用户登录从后台请求出购物车数据,并存储到本地浏览器,可以用h5的sessionStorage;存储结构可以为key: 用户id+cart...

流光韶逝
2016/12/16
23
0
使用angular4和asp.net core 2 web api做个练习项目(三)

第一部分: http://www.cnblogs.com/cgzl/p/7755801.html 第二部分: http://www.cnblogs.com/cgzl/p/7763397.html 后台代码: https://github.com/solenovex/asp.net-core-2.0-web-api-boilerp......

solenovex
2017/11/02
0
0
angular5 angular4 angular2 登录 路由守卫 登录验证 登录实例 实例 session验证 非token方式

找了半天,网上都没有这样的资料和文章。 angular4 angular2怎么做登录验证,angular身份认证。 用法,懂得router的用法,路由守卫的用法,然后在 路由守卫按照下面的逻辑编写,就跟以往ses...

安浪
2017/10/31
0
0
react 关于input 输入框无法输入的问题

react框架搭建的页面,登录页面跳转到主页面之后,通过history(浏览器的后退按钮)回退到登录页面时,该登录页面的输入框输入不了字母信息, 登录页面的代码如下: 路由的跳转采用的是hashR...

陈明cxm
2017/08/24
80
0
shiro No cache or cacheManager properties have been set. Authorization cache cannot be obtained. 导致无法验证

各位大神,请教个问题,使用shiro做权限管理,登录成功后进入系统主页,这是点击浏览器的回退键,再次进入登录页面,点击登录,之后无法登录,但是,如果关闭浏览器,重新打开再登录就没问题...

刘朕
2016/06/24
1K
0
ngular2 VS Angular4 深度对比:特性、性能

在Web应用开发领域,Angular被认为是最好的开源JavaScript框架之一。 Google的Angular团队已于3月23日发布了Angular4,而期待已久的Angular2版本则是之前版本的完全重构。 对于成熟的开发人员...

机器的心脏
06/02
0
0
AJAX跨域总结

蚂蚁金服的实习即将结束,将知识总结一下。 我们这个项目前端使用antD,antD是采用React封装的一套组件库,目前开源http://ant.design/,所有组件都是拿来即用,大大缩短了开发周期,强烈推荐...

炁元
2016/08/20
97
0
WebDriver操作浏览器

1.操作页面元素--单选按钮 WebElement femaleRadioButton = driver.findElement(By.xpath("")); if (!femaleRadioButton.isSelected()) {//判断按钮如果未被选中,则单击选中。 femaleRadioB......

honzhang
2016/05/03
0
0
浏览器缓存清除(WEB开发)

最近在做一个web开发的作业,由于本人对web开发不是很了解,遇到了一个小问题,希望各位热心人士能够解答。 以下是问题的描述: 我们做的系统退出以后,返回到主界面,然后点浏览器(Chrome浏...

竹我
2013/10/28
2.2K
8
Angular 4 HTTP请求 service中的变量没有值

最近在在Angular4 开发前端代码的时候,在service文件调用HTTP请求,请求能成功,也能反应到html页面上去,但有些操作,如有些判断需要在service中完成,但在service文件中取不到值,请问那怎...

iesc
2017/05/11
597
5

没有更多内容

加载失败,请刷新页面

加载更多

下一页

ndarray花式索引

花式索引 花式索引(Fancy indexing)是一个NumPy术语,它指的是利用整数数组进行索引。假设我们有一个8×4数组: In [117]: arr = np.empty((8, 4))In [118]: for i in range(8): ....

火力全開
1分钟前
0
0
Mybaties报错Error querying database

Mybaties我们经常用到动态SQL,如下我们利用动态去做判断,这样写当然没问题,但是当我们不是去判断orgCode(本文中orgCode一直为String类型)是否为空而是判断orgCode是否是一个值的时候该怎...

王子城
3分钟前
0
0
Android 调用手机自带的下载器下载

亲测有用,原文下载地址: 原文地址:https://blog.csdn.net/weixin_36554045/article/details/79108796 下面是原文: 创建一个广播类 public class UpdataBroadcastReceiver extends Broad...

她叫我小渝
6分钟前
0
0
idea工具debug断点红色变成灰色,断点无效

来自:idea工具debug断点红色变成灰色 没事别瞎点,禁用了断点当然不走了 看这篇博客底下的评论笑死我了 真香警告!

不开心的时候不要学习
8分钟前
0
0
知识点总结

jq如何拿到data-info的自定义属性 1.1 原生可以获取到所有属性el.attrbutes 1.2 jq的$(el).attr('属性名称') 继承的几种方式,原型链 2.1 扩展原型对象实现继承 2.2 替换原型对象实现继承 2....

litCabbage
11分钟前
0
0
python语言规范

http://zh-google-styleguide.readthedocs.io/en/latest/google-python-styleguide/python_style_rules/...

ghou-靠墙哭
15分钟前
0
0
istio 监控,遥测 (理论)

Istio提供了一种灵活的模型来强制执行授权策略并收集网格中服务的遥测。 基础架构后端旨在提供用于构建服务的支持功能。它们包括诸如访问控制系统,遥测捕获系统,配额执行系统,计费系统等之...

xiaomin0322
17分钟前
0
0
阿里资深专家面试问题收集

corejava hashcode相等的两个对象一定相等吗?equals呢?反过来相等吗? 介绍一下集合框架? hashtable,hashmap底层实现是什么?hashtable和concurrenthashmap底层实现的区别? hashmap和treemap的...

undefine
18分钟前
8
0
alpine安装软件指定安装源

linux-alpine安装软件指定安装源 一、永久修改apk下载源地址 vi etc/apk/repositories 替换成阿里源 http://mirrors.aliyun.com/alpine/v3.8/main/http://mirrors.aliyun.com/alpine/v3...

我心中有猛狗
19分钟前
0
0
Centos7通过yum安装nginx

添加源地址(直接install可能不是最新版本的) sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm 安装 sudo yum install -y ng......

iplusx
21分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部