Ajax-ajax前进和后退问题

Ajax-ajax前进和后退问题

虐人心 发布于 2017-08-24 字数 109 浏览 1035 回复 3

在项目开发过程中,用到了Ajax做应用,但是这样浏览器原本的前进后后退功能就没有了,有什么发的方法解决吗?

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

偏爱自由 2017-10-11 3 楼

使用jQuery以及jQuery的hashchange插件来写一个hash变化来解决比较简单。
网上的一段示例代码供参考

function setHash(a){
$.browser.msie?$.locationHash(a):location.hash=a;
}
$(window).hashchange(function(){
doHash();
});
function doHash(){
var h = location.hash;
switch (h) {
case "#ajax1":
ajaxFn1();
break;
case "#ajax2":
ajaxFn2();
break;
default:
$("#ajax").html("哈哈,hash没有啦!");
}
}
function ajaxFn1(){
$("#ajax").load("hi.txt", function(){
setHash("#ajax1");
});
}
function ajaxFn2(){
$.get("hi.html", function(t){
$("#ajax").html(t);
setHash("#ajax2");
});
}

瑾兮 2017-09-14 2 楼

对于页面局部ajax结果的历史记录可以借助url#hash方式解决,在不改变当前url,不刷新页面的情况下实现对局部ajax结果的前进后退查看,如今在facebook, google+中得到很大应用。

原理是通过js做一个全局监听,检查当前url中的hash是否发生变化,以此来实现对局部信息的改变。对于搜索引擎友好写法:#!这种写法搜索引擎是可以抓取到的。如:https://www.wenjiangs.com/#!hash

具体的实现过程有同学问过,具体实现参见问题:@求Javascript监听浏览器前进后退键改变url hash的方法?

晚风撩人 2017-08-29 1 楼

用jQuery的hashchange

jQuery hashchange event: 直接绑定事件到window.onhashchange,并支持首次载入可以手动加载