HTML4中的History API

history這個東西大家應該都不陌生，我們經常使用history.back(-1)來實現后退功能，具體的屬性和方法如下：

屬性

length 歷史的項數。JavaScript所能管到的歷史被限制在用瀏覽器的“前進”“后退”鍵可以去到的范圍。本屬性返回的是“前進”和“后退”兩個按鍵之下包含的地址數的和。

方法

back() 后退，跟按下“后退”鍵是等效的。

forward() 前進，跟按下“前進”鍵是等效的。

go() 用法：history.go(x)；在歷史的范圍內去到指定的一個地址。如果 x < 0，則后退 x 個地址，如果 x > 0，則前進 x 個地址，如果 x == 0，則刷新現在打開的網頁。history.go(0) 跟 location.reload() 是等效的。

html5中的History API

history.pushState(data, title , url)：往歷史記錄堆棧頂部添加一條記錄；data會在onpopstate事件觸發時作為參數傳遞過去；title為頁面標題，當前所有瀏覽器都會忽略此參數；url為頁面地址，可選，缺省為當前頁地址。

history.replaceState(data, title , url) ：更改當前的歷史記錄，參數同上。

history.state：用于存儲以上方法的data數據，不同瀏覽器的讀寫權限不一樣。

為什么要使用History API

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

無法使用瀏覽器的前進、后退來切換前后數據。

當我們將瀏覽器地址欄中的鏈接與朋友分享時，可能實際上卻并非我們期望的內容。

單純地使用AJAX不利于搜索引擎優化。

瀏覽器兼容性

pushState, replaceState	5	4.0(2.0)	--	11.50	5.0
history.state	--	4.0(2.0)	--	11.50	--

案例代碼：

<div class="container">

<div class="row">

<ul class="nav navbar-nav">

<li><a href="home.html" class="historyAPI">Home</a></li>

<li><a href="about.html" class="historyAPI">About</a></li>

<li><a href="contact.html" class="historyAPI">Contact</a></li>

</ul>

</div>

<div class="row">

<p>點擊鏈接，ajax修改下面內容</p>

<p id="content"></p>

</div>

</div>

//檢測瀏覽器是否支持history API

if(window.history && history.pushState){

alert('支持');

}else{

alert('不支持');

}

$('.historyAPI').on('click', function(e){

//阻止a標簽默認跳轉行為

e.preventDefault();

//獲取新的href

var href = $(this).attr('href');

//根據新的href去執行的對應的操作，一般是用ajax進行內容刷新

$('#content').html('當前頁面href是:/redbag/'+href);

//添加一條瀏覽器的歷史記錄

history.pushState(null, null, href);

});

//點擊瀏覽器的前進后退按鈕的時候出發

window.addEventListener("popstate", function(e) {

$('#content').html('當前頁面href是:'+location.pathname);

});

總結

以上是生活随笔為你收集整理的HTML5 API详解（15）:History 不刷新也可以实现网页跳转的全部內容，希望文章能夠幫你解決所遇到的問題。

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