禁止浏览器后退

禁止浏览器后退

需求为用户在当前页面不可以返回上一页面，怎么实现功能呢？利用history api pushState 与 popstate事件。

popstate

每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应window对象上触发. 如果当前处于激活状态的历史记录条目是由history.pushState()方法创建,或者由history.replaceState()方法修改过的, 则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝. 调用history.pushState()或者history.replaceState()不会触发popstate事件.

pushState

可以添加历史记录，可以理解为，页面的url发生变化，但是页面没有刷新。

    /**
     * state 为一个对象，在用户导航到新的状态出触发popstate事件，作为事件的state属性
     * title 标题
     * url  新的页面url 可以为绝对路径也可以为相对路径
     */
    window.history.pushState(state, title, url);

如何实现

    let time = 0;
    // 添加历史记录
    window.onload(() => {
        window.history.pushState(null, null, `?times=${time}`);
    });
    window.addEventListener('popstate', () => {
        time += 1;
        window.history.pushState(null, null, `?times=${time}`);
    });