angular4后台系统控制浏览器回退登录页面操作
2017-08-30 00:00
399 查看
摘要: window.history
其实我就想记录这一段代码,方便日后做单页面应用阻止用户通过浏览器回退登录页面。其中popstate是用户操作前进后退的事件源,外面的是初始化整个程序只调用一次,用于记录modules页面
为何我例子中直接用history.state为‘forward’,因为只是简单记录一个值,而且该值没什么意义就是一个参数而已
不要浪费空白,也来解释一下H5的新东西 history state/pushState/replaceState
当前URL下对应的状态信息。如果当前URL不是通过pushState或者replaceState产生的,那么history.state是null。
将当前URL和history.state加入到history中,并用新的state和URL替换当前。不会造成页面刷新。
用法:
history.pushState(state, title, url);
参数解释:
state:与要跳转到的URL对应的状态信息(eg: forward, back)。
title:不知道干啥用,传空字符串就行了。
url:要跳转到的URL地址,必须同源不能跨域。
用新的state和URL替换当前。不会造成页面刷新。
用法:
history.replaceState(state, title, url);
参数解释:同上
参考:
利用pushState开发无刷页面切换
ajax与HTML5 history pushState/replaceState实例
pjax是ajax+pushState的封装,同时支持本地存储、动画等多种功能
其实我就想记录这一段代码,方便日后做单页面应用阻止用户通过浏览器回退登录页面。其中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的封装,同时支持本地存储、动画等多种功能
相关文章推荐
- php后台图书管理系统-登录页面02
- 后台系统无刷新页面记录当前操作位置方法
- php大力力 [036节] 后台系统的登录页面界面做完啦
- 注销返回到登录界面后点击浏览器回退时不能再次进入原页面的方法
- 进程,ps,优先级,前后台调用,进程信号,用户登录审计,top,系统服务的控制
- 登录页面在输入了正确的用户名和密码后仍跳转到登录页面而不是期望的系统首页面,debug的时候发现,登录页面调用的action类方法被调用了两次,后台无法获取前台页面传过来的参数。
- 系统通过浏览器后退到登录页面,然后禁止通过前进登录的实现
- 用户操作控制页面
- defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误
- phpcms--后台登录后显示页面修改
- asp.net core后台系统登录的快速构建
- tp3.2后台判断手机登录还是pc端登录,跳转不同页面
- ios系统,打开浏览器,滑动页面,出现弹性效果的解决方案
- wordpress网站搬家后后台登录页面404文章页404分类页404
- 简单的用户登录页面与后台数据库的交互
- 使用JavaScript操作浏览器页面的跳转
- JSP新闻系统之三后台显示页面
- php后台“爬虫”模拟登录第三方系统(一)---cURL的介绍
- Spring-Security笔记8 在页面和后台中获取登录的user
- Spring中利用拦截器控制登录及页面跳转