Ajax固然好用,但也不能乱用,这不?后退不行了吧~刷新不行了吧~前进不行了吧~这可怎么办?

这里所讲的后退前进并不只是键盘事件,还包括浏览器的前进后退按钮,说白了就是模拟网页正常后退、刷新、前进等操作。

就目前来讲,用最多的还是锚点,用锚点来定位页面,执行相应的动作。

首先,写了一个检测hash的函数,用来检测当前的hash值,参数为回调函数:

function check(cb){

var currHash=null;

setInterval(function(){

var hash=window.location.hash;

if(hash==currHash){

return false;

}else{

currHash=hash;

cb(hash);

}

},1)

}

然后调用并处理相应操作:

check(function(ha){

var v=getHash("ajax")||"default";

var str="";

switch(v){

case "name":

str="name:名字";

break;

case "album":

str="album:相册";

break;

case "photo":

str="photo:照片";

break;

default:

str="默认的";

}

document.getElementById("show").innerHTML=str;

document.getElementById("img").setAttribute("src",v+".jpg");

});

注:

其中getHash(key)函数用来获取hash中的具体值,比如name=mike,getHash("name") 输出 mike

function getHash(k){

var hash = window.location.hash;

if(!hash){

return false;

}

hash_string = hash.substring(1);

hash_arr = hash_string.split('&');

for(i in hash_arr){

k_v = hash_arr[i].split('=');

if(k_v[0] == k){

return k_v[1];

}

}

}

演示页面: http://ouyo.info/lab/history/

图片下载有点慢,请温柔操作