移动端禁止浏览器回退

在开发中遇到了这样一种情景，当用户从一个页面跳转到另一个页面后，不允许其回退到原来的页面。

碰到这个问题，首先想到的是清空history。去网上查了查，发现history根本没法清除。

历史记录一般存储于客户端本地，所以 js 应该无法清空它。

既然不能清空历史，那就给页面“加个历史”：往历史路由里面添加一条当前页面的路由。这样当用户点返回的时候，还是会跳到当前页面。

首先看两个存在问题的方案：

方案一：

给当前页面添加一条历史路由，指向当前页面。监听到按下返回键的时候，页面刷新。

function pushHistory() {
    const state = {
        title: 'title',
        url: '#'
    };
    window.history.pushState(state, null, '#');
}
pushHistory();

window.addEventListener('popstate', () => {
    location.reload();
}, false);

方案二：

在跳转前的页面使用location.replace重定向跳转。

function replaceHistory(url) {
    location.replace(url);
}
replaceHistory(url);

但是以上两种方法都存在缺陷，当用户快速连续多次点击返回的时候，还是会跳回到之前的页面。

所以还需要寻找新的解决方案，其实最重要的问题在于监听到返回键之后做了什么。如果每次返回都往里面加一条空历史呢🤔。

方案三：

给页面添加一条空历史。

function backToSelf() {
    history.pushState(null, '', '');
    window.addEventListener('popstate', function () {
        history.pushState(null, '', '');
    });
}
backToSelf();

这样就好了，但是不足在于会使标题被清空。虽然这里的pushState第二个参数可以设置返回的页面标题，但是目前几乎没有浏览器支持该参数，传一个空字符串会比较安全。