HTML5的History API介紹

HTML5的History API介紹

既實現了局部刷新,又修改了瀏覽器地址,並卻做到了前進後推的效果

這其實是HTML5 History API實現的效果 其技術叫 pjax : pushState + ajax 

 而在JavaScript MVC開始流行之後，通過刷新來修改URL的方法，不禁讓人感到煩躁。
然而HTML5中就制定了一個這樣的API，可以通過方法的方式來修改URL，而又不會使瀏覽器刷新，就是History AP 

 FF5發佈會的時候,FF的工程師展示了一種HTML5的新技術,特別的提及了Github所採作用這種技術.
十分的友好,個人認爲是完美解決了Ajax對搜索引擎不友好 這個萬惡的問題 

在HTML4的時代history已不是什麼新鮮的事物了。

我們經常使用的就有 history.back()以及history.go() 。

爲什麼要使用History API

在AJAX給我們帶來提高用戶體驗、減少HTTP連接數等好處的同時，也漸漸顯露出一些不足之處，比如：

1. 無法使用瀏覽器的前進、後退來切換前後數據。
2. 當我們將瀏覽器地址欄中的鏈接與朋友分享時，可能實際上卻並非我們期望的內容。
3. 單純地使用AJAX不利於搜索引擎優化。

history都有哪些改變。

1. HTML4時代的history API

A) history.length：當前歷史列表中的歷史記錄數（我大概測了下，IE6+是從0開始的，其他的是從1開始的，若有誤請反饋哈，^_^）； 
B) history.go(n)：前進或後退n條記錄，當n=0或空時會刷新當前頁； 
C) history.back()：後退一步； 
D) history.forward()：前進一步;

 

2. HTML5新增的API
A) history.pushState(data, title [, url])：

往歷史記錄堆棧頂部添加一條記錄；data會在onpopstate事件觸發時作爲參數傳遞過去；title爲頁面標題，當前所有瀏覽器都會 忽略此參數；url爲頁面地址，可選，缺省爲當前頁地址； 
B) history.replaceState(data, title [, url]) ：更改當前的歷史記錄，參數同上； 
C) history.state：用於存儲以上方法的data數據，不同瀏覽器的讀寫權限不一樣； 
D) window.onpopstate：響應pushState或replaceState的調用；

有 了這幾個新的API，針對支持的瀏覽器，我們可以構建用戶體驗更好的應用了。就像剛提到的Facebook相冊，雖然是AJAX的方式，但用戶可以直接復 制頁面地址分享給好友，好友打開看到的就是AJAX加載的數據，做到了書籤化。當然這裏面需要做的工作遠不是說的這麼簡單。

 

3. 瀏覽器的兼容性&檢測
在HTML5支持不一的時代，新的API總會存在或這或那的兼容性問題。因此我們有必要了解新接口在不同瀏覽器下的兼容性。



 截圖來自:《Manipulating the browser history》

如何檢測瀏覽器是否支持History API？

function supports_history_api() { return !!(window.history && history.pushState); }

 

如何檢測history.state的兼容性呢？我嘗試賦值history.state=1，但history.state在不同瀏覽器下的讀寫權限不一樣，所以我們換種方式：

var originalHistoryState = history.state; // 保存原有的歷史信息 

history.replaceState(1, null); // 替換當前歷史信息

var stateSupport = history.state == 1; // 是否存儲到剛設置的歷史信息

//stateSupport true的話支持，false不支持

history.replaceState(originalHistoryState, null); // 恢復原來的歷史信息

 

 

4. 安全性
我們看一個例子：DEMO頁面在tenpay.com的域名下，用戶點擊“付款”鏈接嘗試加載另一個域名的某張圖片。


可以看到，當我們嘗試改變當前地址爲一個協議不同、（子）域名不同的地址時，會觸發相應的錯誤。新API在安全性方面作了考慮，所以還是安全的。

5. AJAX Bookmark – AJAX書籤化
有了新API的支持，我們可以針對不同瀏覽器作一些差異化的用戶體驗。尤其是在AJAX盛行的年代，無歷史記錄已經是一大詬病。

爲了解決AJAX的書籤化問題，我們需要解決的主要是以下2個問題：

1. 瀏覽器對新的HTML5  History API的支持不一； //用hash的問題解決
2. 不支持的瀏覽器我們如何解決前進/後退的問題 ；
對於問題1，我們採用的是hash方案，這也是很多方案採用的辦法了；主要原理這裏不細說了，大家可以搜索一下。

下面是我寫的解決方案；大家可以參考下，歡迎互相探討。

github地址：https://github.com/zawaliang/History

6. 一些參考文檔

• W3C html5 history：http://www.w3.org/TR/html5/history.html
• Introducing the HTML5 History API：http://dev.opera.com/articles/view/introducing-the-html5-history-api/
• Manipulating the browser history：https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
• Detecting HTML5 Features：http://diveintohtml5.org/detect.html
• window.history：https://developer.mozilla.org/en/DOM/window.history
• window.onpopstate：https://developer.mozilla.org/en/DOM/window.onpopstate
• MooTools onhashchange：http://yearofmoo.com/onhashchange/

• *參考文獻
  MSD window.histor: https://developer.mozilla.org/en/dom/window.history
  Pjax: https://github.com/defunkt/jquery-pjax

  *推薦資源
  Github的js: http://db.tt/B0Q0Yb8
  Pjax源碼: https://github.com/defunkt/jquery-pjax/blob/master/jquery.pjax.js

  +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

  不錯的例子，http://uloli.com/p/htdl9/  http://doneta.org/eyun/

  https://github.com/devote/HTML5-History-API#english