需要使用的 jquery.history.js插件
在巨人的肩膀之上，以下前进后退工作基于插件完成！
做了几个兼职，上天帮人完成页面的时候顺便做了一个ajax的请求。发现浏览器的刷新，后退，前进按钮失效。于是乎google了一下。发现了一些解决方法。其中一个jquery.hashchange.js的插件有的时候会失效，有的时候会造成页面多次请求。
换另外一个插件测试下，完美达到我的要求。
总的思路，在url上加上参数，一切工作基于这个参数完成。
复制代码 代码如下:
//截取传入字符串中第一次出现的需要的字符串。fieldname+tag 和endtag之间的内容
function getquerystring(url,fieldname,tag,endtag){
var urlstring = url;//document.location.href;
if(urlstring != null){
var typequ = fieldname+tag;
var urlend = urlstring.indexof(typequ);
if(urlend != -1){
var paramsurl = urlstring.substring(urlend+typequ.length);
var isend = paramsurl.indexof(endtag);
if(isend != -1){return paramsurl.substring(0, isend);}
else{return paramsurl;}
}
else {return null;}
}
else{return null;}
}
//设置默认页面
function setdefaultpage(){
$(#contul ul).html();
$(#contul).hide();
$(#cont).show();
$(#top span).find(a).removeclass(active);
$(#top span:eq(0)).find(a).addclass(active);
}
//检测最终字符
function checkcode(getparme){
if (getparme!=null){
getparme=getparme.touppercase();
var codenum=getparme.charcodeat(0)
}
if(codenum>=65&&codenum$(#top span).find(a).removeclass(active);
//alert((codenum-64));
$(#top span:eq(+(codenum-64)+)).find(a).addclass(active);
//$(#cont).html();
$(#cont).hide();
$(#contul).find(ul).html();
runajaxgetcode(getparme);
}else{
setdefaultpage();
}
}
//执行ajax操作
function runajaxgetcode(getparme){
//$(#cont).fadeout('fast',function(){
$.ajax({
cache:false,
type:'get',
url:'sxml/searchbyword'+getparme+'.xml',
beforesend:function(xmlhttprequest){
$('数据加载中，请稍后
')
.insertbefore( $(#cont) )
.fadein('slow');
},
success: function(data,textstatus){
$(#contul).show().find(ul).html();
$(.quick-alert).fadeout('slow', function(){
$(this).remove();
$(item,data).each(function(i, domele){
$(#contul ul).append(+getparme+:+$(domele).children(title).text()+);
if(($(this).index()-6)%6==0){
$(#contul ul).append(
);
}
});
});
},
error: function(){
alert(对不起，数据获取失败,请f5刷新页面重新尝试\如果问题仍然存在请联系网站管理员解决。);
}
});
// });
}
//获取参数
function getparmeter(){
getparme=getquerystring(urlparem,'#javascript=tagcode(','',')');
checkcode(getparme);
}
//getparmeter();
//点击触发
$(#top span:gt(0)).click(function(){
$(.quick-alert).remove();
});
//初始化
$.history.init(function(url) {
//load(url == ? 1 : url);
if(url.length>0){
getparme=getquerystring(url,'javascript=tagcode(','',')');
if (getparme!=null){
getparme=getparme.touppercase();
checkcode(getparme);
}
}
else{
setdefaultpage();
}
});
//页面上其他操作
var getparme;
//function gethash(){
//var curhash = location.hash;
//alert(curhash);
//}
var urlparem;
urlparem=document.location.href;
var tophtml;
var tophtmllink=;
var $_objtop;
$_objtop=$(#top)
tophtml=$_objtop.html();
for(var i=65;i {
tophtmllink+=+string.fromcharcode(i)+;
}
$_objtop.html(tophtml+tophtmllink);
jquery.history.js插件 demos
some demos are available here and included in the repository.
and this site itself is built on the plugin:
复制代码 代码如下:
(function($){
var origcontent = ;
function loadcontent(hash) {
if(hash != ) {
if(origcontent == ) {
origcontent = $('#content').html();
}
$('#content').load(hash +.html,
function(){ prettyprint(); });
} else if(origcontent != ) {
$('#content').html(origcontent);
}
}
$(document).ready(function() {
$.history.init(loadcontent);
$('#navigation a').click(function(e) {
var url = $(this).attr('href');
url = url.replace(/^.*#/, '');
$.history.load(url);
return false;
});
});
})(jquery);