上班之余抽点时间出来写写博文,希望对新接触的朋友有帮助。今天在这里和大家一起学习一下宋体事件
在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>
原文地址:
http://www.cnblogs.com/xumingxiang/archive/2012/11/25/2787530.html
出处: http://www.cnblogs.com/xumingxiang
版权:本文版权归作者和博客园共有
转载:欢送转载,为了存保作者的创作情热,请按要求【转载】,谢谢
要求:未经作者赞成,必须留保此段声明;必须在文章中给出原文连接;否则必究法律责任
文章结束给大家分享下程序员的一些笑话语录: 问路
有一个驾驶热气球的人发现他迷路了。他降低了飞行的高度,并认出了地面 上的一个人。他继续下降高度并对着那个人大叫,“打扰一下,你能告诉我我 在哪吗?”
下面那个人说:“是的。你在热气球里啊,盘旋在 30 英尺的空中”。
热气球上的人说:“你一定是在 IT 部门做技术工作”。
“没错”,地面上的人说到,“你是怎么知道的?”
“呵呵”,热气球上的人说,“你告诉我的每件事在技术上都是对的,但对都没 有用”。
地面上的人说,“你一定是管理层的人”。
“没错”,热气球上的人说,“可是你是怎么知道的?”
“呵呵”,地面上的那人说到,“你不知道你在哪里,你也不知道你要去哪,你 总希望我能帮你。你现在和我们刚见面时还在原来那个地方,但现在却是我 错了”。