js如何禁用物理返回键

    最近做的几个项目都有涉及如何禁用 android 和 ios 的物理返回键，今天有空就把怎么禁用以及禁用原理记录一下吧~

效果展示

我的 demo,是不是已经成功禁用了呢？

核心方法

history.pushState(state, title[, url])

    pushState()是 H5 的 API 中新添加的方法，是实现物理键禁用的核心方法，所以先简单记录下该方法.

    pushState()是在 history 栈中添加一个新的条目。通过 window.history 方法创建新的历史项。但是它只改变地址栏 url，不刷新页面。pushState()带有三个参数：一个状态对象 state，一个标题（目前没有用，可以传 null），以及一个可选的 URL 地址。和 pushState()用法以及参数一致的方法是 replaceState()。它和 pushState()的区别是：pushState()是在 history 栈中添加一个新的条目，而 replaceState()是替换当前的记录值。因为本篇文章没有用到 replaceState(），所以这里就不进行详细说明了。

popstate

    当活动历史记录条目更改时，就会触发该事件。这样就可以帮助我们后面去监听用户点击返回的事件了。需要注意的是调用 history.pushState()或 history.replaceState() 不会触发 popstate 事件。当调用以上两个方法去替换新的历史项，popstate 事件的 state 属性会包含历史项状态对象的拷贝。只有在做出浏览器动作时，才会触发 popstate 事件，比如用户点击浏览器的前进回退按钮。这边经过测试，不同的浏览器在加载页面时处理 popstate 事件的形式存在差异，Chrome 和 Safari 通常会触发 popstate 事件，但 Firefox 则不会。

实现原理

    明白了以上两个核心方法后，就能很好的看懂禁用物理键返回的原理了。实际上就是：在监听到用户点击返回键时，在 history 栈中添加一个当前的地址。这样用户就怎么也返回不了啦~

主要代码

const back = {};
back.onPopState = function () {
    back.record("back");
};
back.record = function (state) {
    history.pushState(state, null, location.href);
}
back.init = function () {
    //每次监听到返回键，都使用pushState插入一条历史记录,popstate 事件的 state 属性会包含历史项状态对象的拷贝
    window.addEventListener("popstate", back.onPopState);
    // 在初始化的时候，先插入一条历史记录，避免用户按返回键
    back.record("back");
}
back.init();