浏览器默认的历史记录, 有时不能符合场景需求. 比如说, 场景要求后退到某个页面后, 不能再后退. 最初的想法是删除浏览器历史, 那么, 可以做到吗?
修改history.length
用浏览器打开网页, 浏览2个页面后, 打开控制台
|
|
怎么回事? 查看W3C文档
|
|
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页面内呈现返回按钮