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來改
變頁面地址和歷史記錄。