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

2016-01-29 11:26 13 1 收藏

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

【 tulaoshi.com - Javascript 】

       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

来源:http://www.tulaoshi.com/n/20160129/1482379.html

延伸阅读
标签: Web开发
//request.html script type="text/javascript" var xmlHttp; function createXMLHttpRequest() { //创建一个xmlHttpRequest对象 if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } function dealAct(){ var url = "requestPage.ph...
标签: Web开发
//request.html script type="text/javascript" var xmlHttp; function createXMLHttpRequest() { //创建一个xmlHttpRequest对象     if (window.ActiveXObject) {         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");     }     else if (window.XMLHttpRequest) { &nb...
标签: 浏览器
IE浏览器前进后退键的隐藏功能   下面三种方式告诉你小小的一个按钮也可以有这么多精心的设计~ 其实当你: 1.鼠标单击按钮一秒以上,或者 2.鼠标右键点击,或者 3.用鼠标向下拖动按钮 都可以激活本窗口的浏览历史记录,这样就能更方面的跳转到之前访问过的页面了! 虽然前进与后退按钮设计的很用心,...
标签: PHP
概述 实话实说,创建一个聊天的程序不是一个很艰难的程序! 写这篇文章的目的是教你一步一步地用XML作为传输载体来创建一个轻量级的聊天程序。这是一个很有趣的应用,而我写这篇文章的动机也是来自于我平时很喜欢PHP。同时,通过业余时间的钻研,我发现通过Web提供了一个稳定的论坛以后,人们往往希望通过Web能够时间即时的聊天室。这...
标签: Web开发
最近做了一个铁路局的行车规则发布系统,有点类似于一个新闻发布系统.因为数据量大,为了加快访问的速度,我把里面的规则在后台添加时生成了静态页面保存在硬盘上, 这样每次访问就不必要去数据库取数据了.但是一个问题出现了,就 是这些规则都需要登陆之后才能访问,没登陆是不允许访问的,所以必须在这些静态页面上进行权限的控制,那么在静态页...

经验教程

471

收藏

95
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部