导航: 好喜爱学习网 >> 网站制作 >> 网页制作技巧 >> Ajax程序中,自己实现页面前进、后退、与标签功能
相关文章
最新文章
文章内容
Ajax程序中,自己实现页面前进、后退、与标签功能
作者:未知 来源:网络收集 录入:管理员
       Ajax刚入门不久,便写了一个Ajax+C#的留言本程序,在实际写程序中,渐渐发现了Ajax程序许多不成熟的地方,其中比较典型的就是页面的前进、后退与标签问题,因为Ajax整个程序是采用无刷新与服务器进行交互,所以导致了大部分浏览器的前进后退的功能按钮失效,当然标签功能也失去了意义,如果用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         else
40         {
41             document.getElementById(’Back’).disabled=’disabled’;
42         }
43         if(hashNO<(hashList.length-1))
44         {
45             document.getElementById(’Next’).disabled=’’;
46         }
47         else
48         {
49             document.getElementById(’Next’).disabled=’disabled’;

[1] [2] [3] [4] [5] 

E-MAIL:309076721@163.com
本站为非营利性质个人网站,建站只为个人爱好与学习,内容大多为电脑技术教程;
网站内容来源于互联网收集整理,禁止用于非法途径,如发现本网站上有侵权的文章请联系我们,我们会尽快删除;
本站不对站点内容准确性、完整性和真实性作任何承诺,由此产生的后果本站不承担任何责任,对以上引起的一切法律纠纷本站无权利承担。