Go homepage(回首页) Upload pictures (上传图片) Write articles (发文字帖)
The author:(作者)归海一刀published in(发表于) 2014/3/16 2:52:55 Ajax程序中,自己实现页面前进、后退、与标签功能(asp.net2.0)_[AJAX教程]
我把实现功能的主要程序代码写在imitateHistory.js这个文件中
imitateHistory.js 1 //定义一个全局数组 2 var hashList = new Array(); 3 //定义一个全局变量,用来作为hash的编号 4 var hashNO = 0; 5 //初始化数组,将初次装载的页面的hash添加进数组 6 hashList[0] = window.location.hash.replace('#',''); 7 //将Hash填加到数组 8 function addHash(newHash) 9 { 10 //这个判断是检测是否在点击后退按钮后,再点击了新的链接 11 if(hashNO!=(hashList.length - 1))12 { 13 //删除此页标识以后的数组项14 hashList.splice(hashNO+1,(hashList.length-(hashNO+1)));15 }16 hashList[hashList.length] = newHash;17 //指向本页hash的编号18 hashNO = hashList.length - 1;19 //将Hash赋值给浏览器20 makeHistory(newHash);21 //根据浏览器的hash,加载数据22 urlCode();23 checkLinkButton();24 }25 //将Hash赋值给浏览器26 function makeHistory(newHash)27 {28 window.location.hash = newHash;29 }30 //检测导航按钮状态(按钮是否可用)31 function checkLinkButton()32 {33 if(hashList.length>1)34 {35 if(hashNO>0)36 {37 document.getElementById('Back').disabled='';38 }39 else40 {41 document.getElementById('Back').disabled='disabled';42 }43 if(hashNO<(hashList.length-1))44 {45 document.getElementById('Next').disabled='';46 }47 else48 {49 document.getElementById('Next').disabled='disabled';50 } 51 }52 }53 //后退按钮onclick事件54 function linkBack()55 {56 hashNO = hashNO - 1;57 makeHistory(hashList[hashNO]);58 //根据浏览器的hash,加载数据59 urlCode();60 checkLinkButton();61 }62 //前进按钮onclick事件63 function linkNext()64 {65 hashNO = hashNO + 1;66 makeHistory(hashList[hashNO]);67 //根据浏览器的hash,加载数据68 urlCode();69 checkLinkButton();70 }71 //根据浏览器的hash,加载数据72 function urlCode()73 {74 var TempHash = window.location.hash;75 //下面的"home"、"msgList"只是做个标识,可以自己定义76 //根据浏览器的hash,加载数据77 switch(TempHash)78 {79 case"":80 alert('调用你的首页');81 break;82 case"home":83 alert('调用你的首页');84 break;85 }86 //如果是留言本的页码标签87 if (TempHash.substr(1,7)=="msgList")88 {89 var page;90 //取得当前页码91 page = window.location.hash.substr(8,window.location.hash.length);92 alert('根据页码调用你的留言列表');93 }94 //当然如果是论坛的帖子标签,我想也只是对TempHash这个字符串多玩几个花样而已,具体我就不介绍了。95 }
以上主要是用到JS数组的存储功能,用window.location.hash这个方法来操作浏览器的碎片标识。下面是一个测试用的HTML文件,向大家描述一下具体的使用方法。文件名test.html
test.html 1 2 3
文章就写到这里了,小弟我是菜鸟,望各位大哥多多指教,如果有看不明白的地方就请大家给我留言吧!
来源:网络
赞