需要使用的 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<=91){

$("#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){

$('<div>数据加载中，请稍后</div>')

.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("<li><a href='"+$(domEle).children("link").text()+"'>"+getParme+":"+$(domEle).children("title").text()+"</a></li>");

if(($(this).index()-6)%6==0){

$("#contul ul").append("<div></div>");

}

});

});

},

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 <91;i++)

{

topHtmlLink+="<span><a href='#javascript=tagCode(""+(String.fromCharCode(i+32))+"")'>"+String.fromCharCode(i)+"</a></span>";

}

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