標籤：location.hash使用例子 ajax前進後退 瀏覽器記錄
我們知道JavaScript中很早就提供了window.history對象，利用history對象的forward()、go()、back()方法能夠方便實現不同頁面之間的前進、後退等這種導航功能。但是AJAX操作，是不能用瀏覽器的前進和後退按鈕進行導航的，因為瀏覽器並不會將AJAX操作加入到記錄中。但是藉助location.hash，我們能夠自己實現AJAX操作的前進和後退。關於window.location.hash的詳細介紹和使用方式，可以參考下面這2篇文章。
location.hash詳解和 6 Things You Should Know About Fragment URLs。
我們需要知道以下2點：
1.如果location.hash發生了變化，那麼瀏覽器地址欄url會發生變化，而且瀏覽器會產生1個記錄。
2.如果location.hash發生了變化，會產生一個hashchange事件，我們可以處理這個事件。
<!DOCTYPE html> <html><head><meta charset="utf-8"><script type="text/javascript" src="jquery-1.11.1.min.js"></script><script type="text/javascript">var currentPageIndex = 0;window.onload = function(){currentPageIndex = 0;showPageAtIndex(currentPageIndex);recordHash(currentPageIndex);}// onhashchange可以監控hash變化window.onhashchange=function(){var hash = window.location.hash;var id = parseInt(hash.substr(1));showPageAtIndex(id);};function toNextPageWhenClick(){currentPageIndex++;if(isValidPageIndex(currentPageIndex)){showPageAtIndex(currentPageIndex);recordHash(currentPageIndex);}else{return;}}function showPageAtIndex(id){$("div[id!="+id+"]").hide();$("#"+id).show();if(isHomePage(id)){$("input").attr("value","current is home page,next page=1");}else if(isLastPage(id)){$("input").attr("value","current page="+id+", it is the end.");}else{$("input").attr("value","current page="+id+",next page="+(id+1));}}function isValidPageIndex(id){return id <= 5;}function isLastPage(id){return id == 5;}function isHomePage(id){return id == 0;}// hash改變,瀏覽器會自動產生一個記錄function recordHash(id){window.location.hash=id;}</script><style>.navigate{height:100px;width:300px;background-color:#0000ff;display:none;}.home{height:100px;width:300px;background-color:#00ff00;display:none;}.last{height:100px;width:300px;background-color:#ff0000;display:none;}</style></head> <body><input type="button" value="" onclick="toNextPageWhenClick();"><div class="home" id="0">HOME PAGE</div><div class="navigate" id="1">ajax1</div><div class="navigate" id="2">ajax2</div><div class="navigate" id="3">ajax3</div><div class="navigate" id="4">ajax4</div><div class="last" id="5">last page</div></body></html>
一個簡單的例子看明白如何利用window.location.hash實現ajax操作時瀏覽器的前進/後退功能
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
