在ajax请求中,不能更新地址栏,地址栏上的“前进”和“后退”按钮就失效了,带来了另外一种糟糕的用户体验。
解决方案如下:
方案一:使用window. Onhashchange 事件
如下面Html片段,点击不同的连接,在mainPanel中加载不同的页面:
<li><a href="/home/index#page=1">page1</a></li>
<li><a href="/home/index#page=2">page2</a></li>
<li><a href="/home/index#page=3">page3</a></li>
</ul>
<div id="mainPanel">
</div>
首先写一个方法来获取当前url中指定key的hash值,如下:
//获取指定key的hash值
function getHash(key, url) {
var hash;
if (!!url) {
hash = url.replace(/^.*?[#](.+?)(?:\?.+)?$/, "$1");
hash = (hash == url) ? "" : hash;
} else {
hash = self.location.hash;
}
hash = "" + hash;
hash = hash.replace(/^[?#]/, '');
hash = "&" + hash;
var val = hash.match(new RegExp("[\&]" + key + "=([^\&]+)", "i"));
if (val == null || val.length < 1) {
return null;
} else {
return decodeURIComponent(val[1]);
}
}
</script>
使用onhashchange事件触发ajax请求:
function loadPanel() {
var page = getHash("page");
if (page == 1) {
$("#mainPanel").load("/home/page1");
}
if (page == 2) {
$("#mainPanel").load("/home/page2");
}
if (page == 3) {
$("#mainPanel").load("/home/page3");
}
}
$(window).bind("hashchange", loadPanel);
</script>
到这里工作已经完成了80%,为什么是80%呢,这里面还有一个问题:
当你直接在浏览器(新开的标签页)的地址栏里输入这样的地址:http://localhost:3859/home/index#page=3 或者通过QQ发给你的好友,看到的并不是如你所想的应该是page=3的内容,而是http://localhost:3859/home/index 的内容。原因很简单——页面加载的时候不会触发onhashchange事件。
所以我们要在上面的代码追加一行:
//或者
$(function(){ $(window).trigger("hashchange"); });
onhashchange 事件location.hash发生改变的时候触发,可以很好解决AJAX刷新后退/前进键失效的问题,是一个新的事件,
目前chrome ,firefox,Opera, Safari,IE8及以上版本浏览器都兼容。
其实对于那些死抱着IE6,IE7 不放的用户,咱也没必要给他们提供这样的用户体验。
方案二:使用jQuery.History.js
对于要兼容IE6、IE7的情况,笔者一直使用jquery.history.js 这个插件(https://github.com/tkyk/jquery-history-plugin)。
这个插件它会去判断浏览器是否支持onhashchange事件,如果不支持,就定时(每个100毫秒)循环判断hash有没有变化,从而执行相应处理。
如:
<script type="text/javascript">
$(function () {
$.history.init(function (hash) {
var page = getHash("page");
if (page == 1) {
$("#mainPanel").load("/home/page1");
}
if (page == 2) {
$("#mainPanel").load("/home/page2");
}
if (page == 3) {
$("#mainPanel").load("/home/page3");
}
});
});
</script>
另外,这个插件已经不再继续更新维护了。
方案三:jquery.ba-hashchange.js
jquery.ba-hashchange.js(http://benalman.com/projects/jquery-hashchange-plugin/)
这个插件的实现原理和jquery.history.js 完全一样。循环间隔为50毫秒。
它overwrite 了window.hashchange事件,使其能够兼容全部浏览器。
使用如下:
<script type="text/javascript">
$(window).hashchange(function () {
var page = getHash("page");
if (page == 1) {
$("#mainPanel").load("/home/page1");
}
if (page == 2) {
$("#mainPanel").load("/home/page2");
}
if (page == 3) {
$("#mainPanel").load("/home/page3");
}
});
$(window).hashchange();
</script>
相关推荐
AJAX下保存浏览器历史记录,实现AJAX下也可以保存浏览器上进和后退历史记录
Ajax中文乱码问题解决方案
Ajax跨域问题及其解决方案.docx
详细介绍了使用ajax如何兼容各种浏览器
通过JS实现AJAX的网站也可以前进和后退,并且效果比浏览器自身的前进后退更牛逼。
解决方案1:禁用缓存,前一次使用的方法,在电脑上各浏览器都没问题,但在ipad、安卓手机上仍有问题 解决方案2:禁用浏览器后退键 [removed] ...解决方案4:用ajax,在ajax页面里将session清空,然后在现在的页面加
ajax跨浏览器的库(包括asp/jsp)
关于跨域,有N种类型,本文只专注于ajax请求跨域(,ajax跨域只是属于浏览器”同源策略”中的一部分,其它的还有Cookie跨域iframe跨域,LocalStorage跨域等这里不做介绍),内容大概如下: 什么是ajax跨域 o原理 o表现...
简单页面访问后台接口的一个样例,用于调试后台接口是否支持跨域,是否支持ajax请求,是否又正确的值返回前端,在postman正确的情况下浏览器不一定能成功,此时就需要用ajax模拟调用检查
发现个AJAX图片浏览器SIMPLEVIEWER.docx
ajax乱码问题.ajax乱码问题的一些解决方案,总结网友的一些方法。
解决方案: 1.jsonp 在远程服务器上设法动态的把数据装进js格式的文本代码段中,供客户端调用和进一步处理;在前台通过动态添加script标签及src属性,表面看上去与ajax极为相似,但是,这和ajax并没有任何关系;...
在线人员 ajax聊天室 关闭浏览器和登出控制使session失效 功能基本完成。 可以查看我的博客。 直接下载即可运行。
下面小编就为大家分享一篇解决js ajax同步请求造成浏览器假死的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
NULL 博文链接:https://exceptioneye.iteye.com/blog/1405495
兼容浏览器的ajax框架,比较实用,轻量级的.
该功能是用ajax+js插件做的一个上传图片的功能!解决了所有浏览器下都兼容的问题,里面代码详细,注释很明确!希望能帮助各位码友哈!
.net中ajax学习解决方案,很好地代码程序,供大家参考
前端基础-Ajax跨域问题的解决方案.docx