html5入门教程（八）history详解

HTML5新添加了对历史的管理，用户可以通过”前进”和”后退”按钮进行历史页面的切换。这让一些不在新页面中打开的新页面前进后退自如，提高了用户体验。

通过haschange事件，可以知道URL的参数什么时候发生了变化，也就是什么时候该有所反应。通过状态管理的API，能够在不加载新页面的情况下改变浏览器的URL。所以需要使用history.pushState()方法。history.pushState()方法接收三个参数：1.要存的内容 2.标题(一般写个空的字符串) 3.地址(可选)。小例子如下

执行了history.pushState()方法后，新的状态信息就会被加入到历史状态栈，而浏览器地址栏也会变成新的相对URL。但是，浏览器并不会想服务器发送请求，即使历史状态改变之后查新location.href也会返回与地址栏中相同的地址。另外，第二个参数目前还没有浏览器实现，所以完全可以只传入一个空字符串即可，或者一个短标题也可以。第一个参数则应该尽可能提供初始化页面状态所需的各种信息。

因为history.pushState()方法会创建新的历史状态，所以会发现”后退”按钮也可以使用了。按下”后退”按钮，会触发window对象的popstate事件。Popstate事件的事件对象有一个state属性，这个属性就包含着当初以第一个参数传递给pushState()的状态对象。小例子如下

更新状态直接更新当前地址栏的内容，他不会产生后退 *** 作，只是单纯修改当前地址。

要更新当前历史状态，可以调用replaceState()，传入的参数与pushState()方法的前两个参数相同。调用replaceState()不会在历史状态栈中创建新状态，只会重写当前状态。小例子如下

网上例子：

他这个还是创建了一个数组，然后把生成的内容存到数组中，在根据传的值

把数组对应的内容给读出来。

history有个问题是第一次点击是无效的，只有第二次才能起作用。这就非常的不爽了。

通常我们也不会需要他执行特别复杂的 *** 作，反而是hash非常的好用。

hash是直接在url后面加一个#，然后立即可以被onpopstate事件检测到。

于是我们可以这样去做：

这种可以采用一下方式：

1、回退后，产生一个前进事件

这种方式，不算是一个满意的解决方式。因为用户能体验到，界面的后退，前进。体验不好。

javascript:window.history.forward(1)

2、禁用键盘的backspace键

这种做法，没有办法消除鼠标的误 *** 作

<script type="text/javascript"> 

//处理键盘事件 禁止后退键（Backspace）密码或单行、多行文本框除外 function banBackSpace(e){ var ev = e || window.event//获取event对象 var obj = ev.target || ev.srcElement//获取事件源 var t = obj.type || obj.getAttribute('type')//获取事件源类型 //获取作为判断条件的事件类型 var vReadOnly = obj.getAttribute('readonly') 

var vEnabled = obj.getAttribute('enabled') 

//处理null值情况 vReadOnly = (vReadOnly == null) ? false : vReadOnly 

vEnabled = (vEnabled == null) ? true : vEnabled 

//当敲Backspace键时，事件源类型为密码或单行、多行文本的， //并且readonly属性为true或enabled属性为false的，则退格键失效 var flag1=(ev.keyCode == 8 && (t=="password" || t=="text" || t=="textarea") 

&& (vReadOnly==true || vEnabled!=true))?true:false 

//当敲Backspace键时，事件源类型非密码或单行、多行文本的，则退格键失效 var flag2=(ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea") 

?true:false 

//判断 if(flag2){ 

return false 

} 

if(flag1){ 

return false 

} 

} 

//禁止后退键 作用于Firefox、Opera document.onkeypress=banBackSpace 

//禁止后退键 作用于IE、Chrome document.onkeydown=banBackSpace 

</script>

3、终极方案：

也是查找了好多资料才找到的，这种方式，可以消除 后退的所有动作。包括 键盘、鼠标手势等产生的后退动作。

<script language="javascript">        //防止页面后退

        history.pushState(null, null, document.URL)

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

            history.pushState(null, null, document.URL)

        })    

</script>

---