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 栈中添加一个当前的地址。这样用户就怎么也返回不了啦~

主要代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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();

Copyright ©2019 guowj All Rights Reserved.

访客数 : | 访问量 :