现在的位置: 首页 > 综合 > 正文

locaton.hash 控制刷新页面

2012年08月10日 ⁄ 综合 ⁄ 共 1952字 ⁄ 字号 评论关闭

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);

}

 

抱歉!评论已关闭.