本文介绍如何使用jquery.history.js插件解决Ajax动态加载页面时浏览器刷新、后退及前进按钮失效的问题。通过修改URL参数并监听状态变化，实现页面内容的无刷新更新与历史记录的同步，确保用户导航体验流畅。
jquery.history.js解决Ajax页面导航问题
本文解决方案依赖于jquery.history.js插件。
该插件基于现有成熟技术构建，用于处理前进与后退功能。
在开发兼职项目时，页面通过Ajax请求加载内容，发现浏览器的刷新、后退和前进按钮无法正常工作。经搜索发现，jquery.hashchange.js插件在某些情况下会失效或导致重复请求。
尝试更换为其他插件，发现jquery.history.js能完美满足需求。
核心思路是在URL中添加特定参数，所有功能均围绕该参数展开。
具体实现代码如下：
该函数用于从传入的字符串中提取指定字段名与标签之间的内容。
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 class="quick-alert">数据加载中，请稍后</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 class='clear'></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);