今天發現原來HTML5對History和Location對象進行了改進，提供了幾個新的API。我覺得，這用來結合Ajax來使用，彌補Ajax技術更新內容但不產生歷史記錄的問題，十分有用。

我很久之前就想過通過錨點來解決實現書簽和定位，配合iframe使用一些小技巧，還可以實現歷史記錄的產生。后來發現，原來IE8和其它現代瀏覽器都大都已經實現了更改錨點來產生歷史記錄了。

記得，我第一次做的一個相關的小應用是工大在線的翻頁書簽功能：http://www.gdutonline.com/newstudent/Detail.aspx?id=14814，這個頁面的分頁是在前端負責的，所以如果不加處理，去到任何一頁碼都是同一個URL。我的處理方法是：用戶點擊翻頁的時候，錨點會改變，如果把帶錨點的網址發給別人，他也會去到該頁。但是，我沒有做歷史記錄的實現，就是說，但用戶從第一頁到第二頁，再點擊返回的時候，頁面不會跳轉到第一頁，因為瀏覽器只負責改變URL，這些更改后的URL需要怎么解析要我們自己寫程序。但問題是，我們如何知道用戶點擊前進后退了？就是URL改變了？這需要我們手動來實現，一般有三種方法：

使用定時器來偵聽URL變化以觸發事件，這個方法兼容性好，被很多框架所采用，但是長期反復檢查URL，效率很低。我在Web文件管理系統中就是采用了這套方案。但是在IE6，7中，只見誒需要解決不產生歷史記錄的問題，一般可以通過嵌入iframe解決。

使用插入iframe等一系列旁門左道，下面的參考資料可以看，這些方法可能不太成熟，不宜用在真正項目中。

使用HTML5的onhashchange事件，這個太雞凍人心了，正是我們要的。但是，它的缺點是需要支持HTML5的瀏覽器支持。

下面開始討論一下HTML5中的History和Location新特性，主要就是兩個方法和兩個事件。

window . history . pushState(data, title [, url ] )

在歷史記錄中插入一個新的記錄，第一個參數表示要傳遞的數據，在下面介紹的事件中可以用到，title用來描述這個頁面的，最后一個可選參數是用來更改URL的，這個我覺得很神奇，因為在方法執行后，URL更改了(不僅僅是錨記和查詢字符串)，但是頁面還是原來的那個。當這個方法執行之后，歷史記錄里面會插入一個新的記錄。

window . history . replaceState(data, title [, url ] )

這個方法和上面的差不多，只是上面的是插入新紀錄，而這個是更新本記錄。不再冗述。

PopStateEvent 事件

這個事件是在歷史位置改變的時候觸發的，主要有兩種情況，一個是我們在代碼中使用pushState和replaceState插入新的歷史記錄時候會觸發，另外一種是我們點擊前進后退或者選擇某個歷史位置的時候觸發。每個歷史位置都有一個data數據，就是pushState和replaceState的第一個參數，我們可以通過事件參數中的state屬性來獲取該歷史記錄中的data參數。

HashChangeEvent事件

這個事件是當錨記改變的時候觸發的，觸發這個事件的方法就有很多種了：1.直接代碼修改location.hash;2.網頁中的超鏈接跳轉;3使用上述兩個History方法修改URL錨記。這些方法都可以觸發HashChangeEvent事件。并且，事件參數中有兩個屬性：oldURL和newURL可以獲取。

縱觀這幾個新特性，我們可以看到HTML5對于網頁的歷史模型進行了大大的改進，特別在使用Ajax應用的時候，前進后退書簽這些都可以回復它們本來的角色了。細觀上面兩個事件，可能有人會覺得功能有些重復了：如果單獨使用PopStateEvent和PopState，可以通過data傳送數據，使用歷史記錄來定位，但是因為位置沒有在URL中反映出來，不能實現書簽功能；而使用HashChangeEvent和錨記的話，可以實現書簽功能，并且可以很好地配合上超鏈接標簽使用，但是這也有一個缺點，因為唯一標識是記錄在錨記上，這意味著不能存儲大量頁面數據。最完美的方法是，它們全部一齊配合著使用，PushState方法和PopStateEvent主要負責龐大的頁面數據儲存和傳遞，HashChangeEvent負責頁面URL標識和書簽功能，完美啦~

剩下的還是老問題……瀏覽器們什么時候可以都給支持一下啊？……

參考資料

總結

以上是生活随笔為你收集整理的html5中的图片的location,HTML5中的History和Location对象的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。