使用實例：
使用onhashchange事件做一個簡單的上一頁下一頁功能，並且當刷新頁面時停留在當前頁
html:
<!DOCTYPE html>
<html>
<body>
<div id="demo"></div>
<button class="previous-page">上一題</button>
<button class="next-page">下一題</button>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
//json數據
var data = {
"msg": [
{
"id" : 0,
"cont" : "測試內容1",
},
{
"id" : 1,
"cont" : "測試內容2",
},
{
"id" : 2,
"cont" : "測試內容3",
}
]
}
// 使用 location.hash 屬性來修改錨部分
function changePart(id) {
location.hash = id;
}
// 錨點改變后要執行的函數
function myFunction(){
var hasNum = getId();
var _data = data.msg;
var _item = _data[hasNum];
render(_item);
}
//地址欄#id
function getId(){
var id = window.location.hash;
if(id){
return id.replace('#','');
}else{
return 0;
}
}
// 渲染頁面
function render(d){
var val = d.id +"==="+d.cont;
$("#demo").html(val);
}
$(function(){
$('body').on('click','.next-page',function(){
var hasNum = getId();
var _d = data.msg,
_i = Number(hasNum)+1;
if(_i < _d.length){
changePart(_i);
}else{
return false;
}
});
$('body').on('click','.previous-page',function(){
var hasNum = getId();
var _d = data.msg,
_i = Number(hasNum)-1;
if(_i >=0 && _i < _d.length){
changePart(_i);
}else{
return false;
}
});
var hasNum = getId();
var _data = data.msg[hasNum];
render(_data);
// 調用hashchange
if(window.addEventListener){
window.addEventListener("hashchange", myFunction,false);
}else if(window.attachEvent){
window.attachEvent("hashchange", myFunction);
}
})
</script>
</body>
</html>
遇到問題和解決方法：
一、當前頁面中的a標簽不能使用#錨點，否則會影響onhashchange的事件響應，導致hash無法改變，以至於點擊上一頁下一頁按鈕無法使用
二、不要在body標簽上直接加<body onhashchange="myFunction()">，最好使用window.addEventListener("hashchange", myFunction,false);監聽事件，否則在有些特殊的環境下，比如蘋果手機的QQ中直接打開鏈接無法響應hashchange事件