onhashchange事件,只需要修改hash值即可响应onhashchange事件中的函数(适用于上一题下一题和跳转页面等功能)
使用实例:
使用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事件
相关文章
- ExtJS学习笔记2:响应事件、使用AJAX载入数据
- 【Vue】单击click事件综合示例和防冒泡方法
- 添加OSG各种事件处理器
- 【实战】STM32 FreeRTOS移植系列教程7:FreeRTOS 事件标志组
- CSDN日报190903:程序员离职事件始末
- 【Android开发】事件分发和处理机制
- QT中父子窗口事件传递与事件过滤器
- 事件循环(EventLoop)的学习总结
- JS——DOM事件流(冒泡,捕捉,目标)、阻止事件冒泡 、事件委托
- 【FAQ】HarmonyOS 3.0 悬浮窗触摸事件被屏蔽
- Qt音视频开发30-Onvif事件订阅
- 鸿蒙开发之如何响应Button点击事件(HarmonyOS鸿蒙开发基础知识)
- 小程序框架之视图层 View~事件系统~WXS响应事件
- jQuery事件
- nodejs基础(回调函数、模块、事件、文件读写、目录的创建与删除)
- 案例分析:项目组内踢皮球事件
- Unity UIWidgets 之 UIWidgets 简单入门使用之 简单点击事件的数据交互使用
- 关于Unity中的Input输入事件
- Swift - 触摸事件响应机制(UiView事件传递)
- 3D Slicer Modify Mouse Event 修改3D Slicer中的鼠标响应事件
- 从spring源码汲取营养:模仿spring事件发布机制,解耦业务代码
- js和jquery判断事件流
- 小程序事件参数传递