HTML5 History API 實作無刷新跳​​躍 _html5教學技巧

有一次在上**網的時候，發現登陸、註冊動畫效果非常華麗，但讓我感到震驚的是頁面竟能夠實現無刷新跳轉（已改版，觀看此效果可以猛擊此處： GitHub或閱FM），回顧了所學的前端知識，似乎沒有任何技術可以實現這一點，於是百度了一下，才發現這原來是使用HTML5中History API實現的效果，但奈何一直未曾派上用場。直到部落格改版時，才將這項技術應用起來。
在HTML5中，
1. 新增了透過JS在瀏覽器歷史記錄中新增項目的功能。
2. 在不刷新頁面的前提下顯示改變瀏覽器網址列中的URL。
3. 新增了當使用者點擊瀏覽器的後退按鈕時觸發的事件。
透過以上三點，可以實現在不刷新頁面的前提下動態改變瀏覽器網址列中的URL，動態顯示頁面內容。
例如： 當頁面A和頁面B內容不一樣的時候，在HTML5之前，如果從頁面A切換到頁面B時，需要在瀏覽器下從頁面A切換到頁面B，或者說，如果需要有後退按鈕功能的話，可以在URL位址加上#XXXX 可以實現後退功能。那麼現在在HTML5中，可以透過History API實作如下處理即可：
1. 在A頁面 透過發AJAX請求 請求頁面中的B資料。
2. 在頁面A中透過JS裝載對應的資訊到對應的位置來。
3. 透過History API在不刷新頁面的情況下在瀏覽器的網址列中從頁面A的URL位址切換到頁面B的URL位址。
HTML4中的History API
屬性
1.length 歷史的項數。 javascript 所能管到的歷史被限制在用瀏覽器的「前進」「後退」鍵可以去到的範圍。本屬性傳回的是「前進」和「後退」兩個按鍵之下所包含的位址數的和。
方法
1.back() 後退，跟按下「後退」鍵是等效的。
2.forward() 前進，跟著按下「前進」鍵是等效的。
3.go() 用法：history.go(x)；在歷史的範圍內去到指定的一個位址。如果 x 0，則前進 x 個位址，如果 x == 0，則會重新整理現在開啟的網頁。 history.go(0) 跟 location.reload() 是等效的。
HTML5中的History API
1. history.pushState(data, title [, url])：在歷史記錄中新增一筆記錄；data會頂部在記錄onpopstate事件觸發時作為參數傳遞過去；title為頁面標題，目前所有瀏覽器都會忽略此參數；url為頁面位址，可選，預設為目前頁位址。
2. history.replaceState(data, title [, url]) ：更改目前的歷史記錄，參數同上。
3. history.state：用於儲存以上方法的data數據，不同瀏覽器的讀寫權限不一樣。
4. popstate事件：當使用者點擊瀏覽器的後退或前進按鈕時觸發該事件。在事件處理函數中讀取觸發事件的事件物件的state屬性值，該屬性值即為執行pushState方法時所使用的第一個參數值，其中保存了在向瀏覽器歷史記錄中新增記錄同步保存的對象。
到目前為止，IE10，firefox4以上的版本，Chrome8以上的版本，Safari5，Opera11以上的版本瀏覽器支援HTML5中的History API。
HTML:

複製程式碼

程式碼

.container{width:px;border:pxsolid #ccc;overflow:hidden;}
.container ul{float:left;width:px ;}
.container li{width :px;height:px;line-height:px;overflow:hidden;}
.container li a{text-decoration:none;}
.container li.當前a{color:red;}
.all-content{width:px;float:left;overflow:hidden;}
;


頭>

• 
  測試
  


• 
  測試
  li>
  
• 
  測試
  

• 
  
• 
  
• li> li>
  

身體>