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

这几年单页应用很流行，利用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()

        }

    }