Ajax程序中,自己实现页面前进、后退、与标签功能

妖娆妩媚11

妖娆妩媚11

2016-01-29 11:26

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.length1)
34     {
35         if(hashNO0)
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’; [next]
50         }   
51    }
52 }
53 //后退按钮onclick事件
54 function linkBack()
55 {
56     hashNO = hashNO - 1;
57     m
展开更多 50%)
分享

猜你喜欢

Ajax程序中,自己实现页面前进、后退、与标签功能

电脑网络
Ajax程序中,自己实现页面前进、后退、与标签功能

实现在AJAX下的前进、后退功能

Web开发
实现在AJAX下的前进、后退功能

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

2345王牌浏览器前进后退功能

浏览器
2345王牌浏览器前进后退功能

ajax实现标签导航

Web开发
ajax实现标签导航

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

2345智能浏览器的前进后退功能

浏览器
2345智能浏览器的前进后退功能

在AJAX程序中实现互斥揭秘

Web开发
在AJAX程序中实现互斥揭秘

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

一個Ajax.NET的查詢實例

一個Ajax.NET的查詢實例

《噬神者2 狂怒解放》R11高文任务打法视频分享

《噬神者2 狂怒解放》R11高文任务打法视频分享
下拉加载更多内容 ↓