现在 IT 发展迅速, 大多数朋友无论是什么行业或者岗位都在或多或少的学习一些 IT 方面的知识, 而 lweb 前端又是最受欢迎的一种. 今天小猿圈 Web 前端老师为你分享一下 Web 前端之监听拦截 Android 返回键方法, 感兴趣的朋友一起看看吧.
浏览器窗口有一个 history 对象, 用来保存浏览历史.
如果当前窗口先后访问了三个网址, 那么 history 对象就包括三项, history.length 属性等于 3.
history 对象提供了一系列方法, 允许在浏览历史之间移动:
Windows.history.back(): 移动到上一个访问页面, 等同于浏览器的后退键.
Windows.history.forward(): 移动到下一个访问页面, 等同于浏览器的前进键.
Windows.history.go(num): 接受一个整数作为参数, 移动到该整数指定的页面, 比如 go(1) 相当于 forward(),go(-1) 相当于 back().
Windows.history.pushState():html5 为 history 对象添加了两个新方法.
Windows.history.pushState() 和 Windows.history.replaceState(), 用来在浏览历史中添加和修改记录.
注: 1, 如果移动的位置超出了访问历史的边界, 以上三个方法并不报错, 而是默默的失败.
2, 设置时, 页面通常是从浏览器缓存之中加载, 而不是重新要求服务器发送新的网页.
重点讲解下: Windows. history.pushState()
Windows.history.pushState(state, title, utl), 在页面中创建一个 history 实体. 直接添加到历史记录中.
其中参数:
state: 一个与指定网址相关的状态对象, popstate 事件触发时, 该对象会传入回调函数. 如果不需要这个对象, 此处可以填 null.
title: 新页面的标题, 但是所有浏览器目前都忽略这个值, 因此这里可以填 null.
url: 新的网址, 必须与当前页面处在同一个域 . 浏览器的地址栏将显示这个网址.
注: pushState 方法不会触发页面刷新, 只是导致 history 对象发生变化, 地址栏会有反应.
举例实现:
HTML5 监听拦截 Android 返回键方法如下:
1, 监听 popstate 事件
- Windows.addEventListener("popstate", function(){
- //doSomething
- }, false)
2, 取消默认的返回操作, 即监听拦截返回键: 添加一条空的 history 实体作为替代原来的 history 实体
Windows.history.pushState(null, null, "#");
举例:
- <!DOCTYPE HTML>
- <HTML>
- <meta name="viewport" content="width=device-width">
- <script type="text/javascript">
- var count = 0;
- Windows.history.pushState(null, null, "#");
- Windows.addEventListener("popstate",
- function(e) {
- Windows.history.pushState(null, null, "#");
- document.getElementById('logView').innerHTML = "用户点击返回" + (++count)
- })
- </script>
- <body>
- <p id="logView">
- test
- </p>
- </body>
- </HTML>
最后想要了解更多关于 Web 前端方面内容的小伙伴, 请关注小猿圈官网, 小猿圈竭力为你提供更全面更有竞争力的视频 Web 前端自学2群: 738735873, 希望对你有所帮助.
来源: http://www.jianshu.com/p/498ac64df053