3.4 History API 87
dropElement . ondragenter = function (e) {
var dt = e.dataTransfer;
dt.dropEffect = * link ‘ ;
e.preventDefault()j
>；
在3.16.3节第5小节中，我们有一个更深入的例子，它将Drag&Drop API和File API相结合从
而实现更复杂的功能。
创建拖放事件监听程序时，一定要阻止默认行为，尤其是在dragover事件中一定要执行
preventDefault()，否则drop事件不会被触发，同时dropEf fect也不会生效。下面是正
确的代码：
dropElement . addEventListener ( ‘ dragover ‘ , f unction ( e) {
e.preventDefault () ;
}, false);
请注意，dragstart事件里不能阻止默认行为，否则拖曳行为就不会发生。
3.4 History API
Ajax有一个问题一直困扰着开发者，就是网页状态无法被添加到历史记录中，这意味着用户
不能通过浏览器的“前进”和“后退”按钮前进或者退回到某个状态。
而在HTML5规范中，history对象捉供了丰富的接口，使得开发者可以方便地在历史记录
中添加状态或改变状态，这样我们既可以使用JavaScript来部分更新页面，又能更新地址栏和浏览
器历史记录。Google+已经使用History API实现了地址栏改变而页面不跳转的效果。目前Chromc、
Opcra、Safari和Firefox新版本都提供了对History API的完整支持。
3.4.1 以前的解决方案
以前的hist ory对象常用的API包括以下4个。
口window．history．back()o它表示后退到上一个页面。
口window．his七ory．forward()o它表示前进到下一个页面。
口window．history．go()o它表示跳转到某个页面，其中go (0)代表刷新当前页面，go《-1）
代表跳转到上一个页面．go (1)代表跳转到下一个页面。
口window．history．lengtho它表示当前页面历史记录的条数。
3.4.2 现在的History API
HTML5 history对象提供了两个新方法pushState()和replaceState()，它们允许我们

添加和改变当前浏览器的地址。
pushState()用于向history对象添加当前页面的记录，并且改变浏览器地址栏的URL。它
有3个参数，分别是state对象、标题以及可选参数目标URLo state是一个JavaScriptXt象，记
录要插入到历史记录条目的相关信息o pushState()的示例代码如下：
history .pushState ( {username : ‘h七m15* ) , ‘user account ‘ , *’ user . html ‘ ) ;
注意pushState()带来地址栏的变化不会触发hash（用过锚的开发者应该了解，URL特号后
面的部分就是hash．改变hash的值后，页面不会跳转到新页面，也不会刷新）跳转．
replaceState()
如下：
类似于pushState()，只是将当前页面状态替换为新的状态，示例代码
history . replaceSta七e ( {username : ‘h七ml5 ‘ } , ‘user account ‘ , ‘user _ html N ) ;
另外，History API还提供了onpopstate事件，该事件在窗口历史记录改变时被触发，示例
代码如下：
window. onpopstate= function( event)t
console．log (event .state)； ／／输出pushState《）或者replaceState l）设置的state tt息
‘
代码清单3-2是一个最简单的示例，演示在用JavaScript更新页面内容时通过History API来改
变页面地址和历史记录。