单页应用(SPA)前端javascript如何阻止按下返回键页面回退

本文介绍了如何在单页应用(SPA)中处理用户按下返回键时防止页面回退的问题。通过利用HTML5的history.pushState方法,在弹框打开时添加与当前页面相同的记录到历史栈,使得返回键操作仍保持在当前页面。同时,当用户正常关闭弹框后,需要在关闭方法中调用history.back()以确保正确回退。
摘要由CSDN通过智能技术生成

这几年单页应用很流行,利用html5新特性history.pushState/replaceState 可以操作URL无刷新动态加载html内容,达到比较好的用户体验。

不过经常会遇到这样一个问题,那就是用户总是习惯于按返回键来返回上一页,移动端页面有弹框的时候,用户期望按下返回键来关闭弹框,这时候却发现返回到了上一页。。。其中的技术原理我们前端同学都知道,不过用户不理解啊,你也没办法解释给他们,正常情况下我们会修改页面交互,尽量避免弹框的出现。不过这样毕竟用户体验不太好。

放在以前,我们也没办法了。不过现在我们可以利用history新的API来满足用户想要的效果。说实话,阻止安卓返回键或者浏览器的返回按钮的默认行为是不可能的。不过我们可以换一种思路,那就是可以在弹框每一次打开的时候,往history历史记录中添加一条和当前页面一模一样的记录,这时候如果浏览器返回上一页的时候就会还停留在当前页面。

举个例子:

正常情况下,C页面有一个弹框

浏览器历史记录: A>B>C

这时候我们可以在openModal方法中执行history.pushState({}, '')

浏览器历史记录: A>B>C>C

用户在弹框打开的情况下按下返回键,页面返回到上一页

浏览器历史记录: A>B>C

这样就表面上实现了阻止页面回退,至于用户是不会管具体的技术细节的。

另外可能还会有一些收尾的工作要做,如果用户是正常关闭弹框后按下了返回键想要返回上一页,这时候页面会仍然停留在当前页面。这时候我们需要在关闭弹框的公共方法中手动调用history.back()来避免这种情况的出现。

下面上代码:

componentWillMount() {
         this. addEventHandler();
    }
 
     componentWillUnmount() {
         this. removeEventHandler();
    }
 
     addEventHandler() {
         window. addEventListener( 'popstate', this. closeModal, false);
         history. pushState({}, '')
    }
 
     removeEventHandler() {
         window. removeEventListener( 'popstate', this. closeModal, false);
    }
 
     closeModal = ( e) => {
         if (! e) {
             window. removeEventListener( 'popstate', this. closeModal, false);
             history. back()
        }
    }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值