location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。比如http://domain/#admin的location.hash="#admin"。利用这个属性值可以做一个非常有意义的事情。
很多人都喜欢收藏网页,以便于以后的浏览。不过对于Ajax页面来说的话,一般用一个页面来处理所有的事务,也就是说,如果你浏览到一个Ajax页面里边有意思的内容,想将它收藏起来,可是地址只有一个呀,下次你打开这个地址,还是得像以往一样不断地去点击网页,找到你钟情的那个页面。另外的话,浏览器上的“前进”“后退”按钮也会失效,这于很多习惯了传统页面的用户来说,是一个很大的使用障碍。
那么,怎么用location.hash来解决这两个问题呢?其实一点也不神秘。
比如,我的作者管理系统,主要功能有三个:普通搜索、高级搜索、后台管理,我分别给它们分配一个hash值:#search、#advsearch、#admin,在页面初始化的时候,通过window.location.hash来判断用户需要访问的页面,然后通过javascript来调整显示页面。比如:
var hash;
hash=(!window.location.hash)?"#search":window.location.hash;
window.location.hash=hash;
//调整地址栏地址,使前进、后退按钮能使用
switch(hash){
case "#search":
selectPanel("pnlSearch"); //显示普通搜索面板
break;
case "#advsearch":
case "#admin":
}
通过window.location.hash=hash这个语句来调整地址栏的地址,使得浏览器里边的“前进”、“后退”按钮能正常使用(实质上欺骗了浏览器)。然后再根据hash值的不同来显示不同的面板(用户可以收藏对应的面板了),这就使得Ajax页面的浏览趋于传统化了。
function initfun(){
if(xmlnum !=0){
$("Tab_2").style.display = "none";
$("Tab_1").onclick = "clickTab(0)";
}
var ac = refresh.GetAction(); //初始化得到上次点击的hash change(0,0,0);
if(ac.indexOf('change(') != -1){
var arr = ac.split(',');
n = arr[1]; //得到change(0,0,0); 第二个参数
}
//根据n来选择显示哪一个
showdiv(n);
}
try{
window.onload =function(){
initfun();
OutputHtml();
if(xmlnum == 0)
OutputChannelHtml();
}
}catch(e){}
function showdiv(n){
if(n == 0){
$("Tab_1").className = "Tab1Cur";
$("Tab_2").className = "Tab2Not";
$("videomain").style.display = "inline";
$("channelmain").style.display = "none";
$("gml").style.display = "inline";
$("midd").style.display = "inline";
}
else{
$("Tab_1").className = "Tab1Not";
$("Tab_2").className = "Tab2Cur";
$("videomain").style.display = "none";
$("channelmain").style.display = "inline";
$("gml").style.display = "none";
$("midd").style.display = "none";
}
}
function clickTab(n){
refresh.SetAction("change(0,"+n+",0)"); //设置hash
var ac = refresh.GetAction();//得到hash
if(ac.indexOf('change(') != -1){
var arr = ac.split(',');
ac = arr[0]+","+ n +","+ arr[2];
refresh.SetAction(ac);
}
showdiv(n);
}