JS禁止浏览器后退

浏览器默认的历史记录, 有时不能符合场景需求. 比如说, 场景要求后退到某个页面后, 不能再后退. 最初的想法是删除浏览器历史, 那么, 可以做到吗?

修改history.length

用浏览器打开网页, 浏览2个页面后, 打开控制台

1
2
3
history.length // 输出为3
history.length = 0 // 试图修改历史记录
history.length // 输出仍为3

怎么回事? 查看W3C文档

1
2
3
4
5
6
7
8
9
interface History {
  readonly attribute long length; 
  readonly attribute any state;
  void go(optional long delta);
  void back();
  void forward();
  void pushState(any data, DOMString title, optional DOMString? url = null);
  void replaceState(any data, DOMString title, optional DOMString? url = null);
};

history.length的长度是只读的; 从文档也可知, 并未提供删除浏览器历史记录的接口, 因此, 思路应该变一下

history.length

如果要禁止返回, 则必须让history.length始终为1

但是浏览器打开一个新的空白标签, history.length就是1, 再访问一个页面时, 就变为2了(因此正常网页下, history的length属性, 最少为2), 此时浏览器的后退按钮就会变得可点击, 移动端也可实现硬件返回.

如果想创建一个history.length为1的页面, 目前想到的是两种方法:

  • 通过window.open()创建一个页面
  • 把某页面设置为浏览器的主页

location.replace

使用上面的方法创建了页面了, 可以使用location.replace()方法跳转页面, 这样history.length是不会增加的

这种方法可以有效的阻止移动端的硬件返回, 缺点是完全舍弃了浏览器历史记录

自己管理历史记录

由于location.replace()的不足, 需要自己定义一个数组, 记录访问过的url, 再对外提供接口, 模拟History接口, 提供forward(), back()等方法, 以便在应用内前进/后退.

另外, 注意在H5页面内呈现返回按钮

参考

Fork me on GitHub