onhashchange事件，只需要修改hash值即可响应onhashchange事件中的函数（适用于上一题下一题和跳转页面等功能）
Posted on 2016-05-18 14:52 人生梦想起飞 阅读(5858) 评论(0) 编辑 收藏 举报使用实例：
使用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事件
