文档章节

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

SubinY
 SubinY
发布于 2017/08/30 14:12
字数 468
阅读 965
收藏 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
粉丝 9
博文 87
码字总数 66343
作品 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
react 关于input 输入框无法输入的问题

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

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

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

刘朕
2016/06/24
2.8K
0
angular5 angular4 angular2 登录 路由守卫 登录验证 登录实例 实例 session验证 非token方式

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

安浪
2017/10/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

以太坊中文文档翻译-区块

本文原文链接 点击这里获取Etherscan API 中文文档(完整版) 完整内容排版更好,推荐读者前往阅读。 区块(Blocks) 区块相关的 API,接口的参数说明请参考Etherscan API 约定, 文档中不单独...

Tiny熊
23分钟前
1
0
Linux 内核的一个问题

是virtio 驱动,但是没有启动 virtio-mmio virtio-mmio.0: Failed to enable 64-bit or 32-bit DMA. Trying to continue, but this might not work.....[ 1.047924] md: ... autorun......

MtrS
47分钟前
2
0
MySQL主从配置

17.1 MySQL主从介绍 17.2 准备工作 17.3 配置主 17.4 配置从 17.5 测试主从同步 一、 MySQL主从介绍

tobej
57分钟前
2
0
读书replay《博弈与社会》.1.20190526

前情 《美丽心灵》,一部讲数学家约翰·福布斯·纳什的电影,我第一次听到博弈理论就是在这部电影里。看过电影之后就一直想知道,博弈论究竟讲了什么。很久之后,20190417这天,我刷JD的购物...

wanxiangming
今天
2
0
iOS TableView层级结构剖析

首先上图 下面来分析一下tableView的层级结构 tableView的组成: 1.整个tableView有且仅有一个头部和尾部就是tableViewHeadView和tableViewFooterView2.tableView 可以有多个section,一个s...

HOrange
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部