angular4后台系统控制浏览器回退登录页面操作
博客专区 > SubinY 的博客 > 博客详情
angular4后台系统控制浏览器回退登录页面操作
SubinY 发表于6个月前
angular4后台系统控制浏览器回退登录页面操作
  • 发表于 6个月前
  • 阅读 182
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

摘要: window.history

 其实我就想记录这一段代码,方便日后做单页面应用阻止用户通过浏览器回退登录页面。其中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的封装,同时支持本地存储、动画等多种功能

 

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 7
博文 85
码字总数 63569
×
SubinY
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: