麦子学院 2018-04-15 23:33

Html5 监听拦截Android返回键方法详解

回复:0 查看:3519

本文和大家分享的主要是使用html5 监听拦截 android 返回键的相关内容，一起来看看吧，希望对大家学习html5 有所帮助。

　　浏览器窗口有一个history 对象，用来保存浏览历史。

　　如果当前窗口先后访问了三个网址，那么history 对象就包括三项， history.length 属性等于 3 。

　　history 对象提供了一系列方法，允许在浏览历史之间移动：

　　window.history.back() ：移动到上一个访问页面，等同于浏览器的后退键。

　　window.history.forward() ：移动到下一个访问页面，等同于浏览器的前进键。

　　window.history.go(num) ：接受一个整数作为参数，移动到该整数指定的页面，比如 go(1) 相当于 forward() ， go(-1) 相当于 back() 。

　　window.history.pushState() ： HTML5 为 history 对象添加了两个新方法， window.history.pushState() 和 window.history.replaceState() ，用来在浏览历史中添加和修改记录。

　　注：1. 如果移动的位置超出了访问历史的边界，以上三个方法并不报错，而是默默的失败。

　　2. 设置时，页面通常是从浏览器缓存之中加载，而不是重新要求服务器发送新的网页。

　　重点讲解下： window. history.pushState()

　　window.history.pushState(state, title, utl) ，在页面中创建一个 history 实体。直接添加到历史记录中。

　　其中参数：

　　state ：一个与指定网址相关的状态对象， popstate 事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填 null 。

　　title ：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填 null 。

　　url ：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

　　注：pushState 方法不会触发页面刷新，只是导致 history 对象发生变化，地址栏会有反应。

　　举例实现：

　　Html5 监听拦截 Android 返回键方法如下：

　　1. 监听 popstate 事件

　　window.addEventListener("popstate", function(){

　　//doSomething

　　}, false)

　　2. 取消默认的返回操作，即监听拦截返回键：添加一条空的 history 实体作为替代原来的 history 实体

　　window.history.pushState( null, null, "#");

　　举例：

<!DOCTYPE html>

<html>

var count = 0 ;

window.history.pushState(null, null, "#");

window.addEventListener("popstate", function(e) {

window.history.pushState(null, null, "#");

document.getElementById('logView').innerHTML = " 用户点击返回 " + (++count)

})

</script>

<body>

</body>

</html>

来源：网络