Ajax中的前进、后退功能
作者：大鹏 发布于：2007-5-10 11:18 Thursday 分类：JavaScript与HTML
这些代码是在ajax中模仿浏览器中的前进后退按扭的效果，并没有真正的对浏览器的前进后退按扭控制。
imitateHistory.js
[codes=js]
//定义一个全局数组
var hashList = new Array();
//定义一个全局变量，用来作为hash的编号
var hashNO = 0;
//初始化数组，将初次装载的页面的hash添加进数组
hashList[0] = window.location.hash.replace('#','');
//将Hash填加到数组
function addHash(newHash)
{
//这个判断是检测是否在点击后退按钮后，再点击了新的链接
if(hashNO!=(hashList.length - 1))
{
//删除此页标识以后的数组项
hashList.splice(hashNO+1,(hashList.length-(hashNO+1)));
}
hashList[hashList.length] = newHash;
//指向本页hash的编号
hashNO = hashList.length - 1;
//将Hash赋值给浏览器
makeHistory(newHash);
//根据浏览器的hash，加载数据
urlCode();
checkLinkButton();
}
//将Hash赋值给浏览器
function makeHistory(newHash)
{
window.location.hash = newHash;
}
//检测导航按钮状态（按钮是否可用）
function checkLinkButton()
{
if(hashList.length>1)
{
if(hashNO>0)
{
document.getElementById('Back').disabled='';
}
else
{
document.getElementById('Back').disabled='disabled';
}
if(hashNO<(hashList.length-1))
{
document.getElementById('Next').disabled='';
}
else
{
document.getElementById('Next').disabled='disabled';
}
}
}
//后退按钮onclick事件
function linkBack()
{
hashNO = hashNO - 1;
makeHistory(hashList[hashNO]);
//根据浏览器的hash，加载数据
urlCode();
checkLinkButton();
}
//前进按钮onclick事件
function linkNext()
{
hashNO = hashNO + 1;
makeHistory(hashList[hashNO]);
//根据浏览器的hash，加载数据
urlCode();
checkLinkButton();
}
//根据浏览器的hash，加载数据
function urlCode()
{
var TempHash = window.location.hash;
TempHash = TempHash.replace('#','');
//下面的"home"、"msgList"只是做个标识，可以自己定义
//根据浏览器的hash，加载数据
switch(TempHash)
{
case "":
// alert('调用你的首页');
break;
case "home":
// alert('调用你的首页');
break;
}
//如果是留言本的页码标签
if (TempHash.substr(0,7)=="msgList")
{
var page;
//取得当前页码
page = window.location.hash.substr(7,window.location.hash.length);
// alert('根据页码调用你的留言列表');
}
//当然如果是论坛的帖子标签，我想也只是对TempHash这个字符串多玩几个花样而已，具体我就不介绍了。
imitateAjax(TempHash);
}
[/codes]
测试页面：test.html
[codes=html]
[/codes]
标签： html javascript ajax
« 上一篇 谁杀死了站长 | [转]采用DIV+CSS布局的好处 下一篇»