pjax 历史管理 jQuery.History.js
2016-06-15 10:52
537 查看
更新
http://www.bootcdn.cn/jquery.pjax/
pjax通过抓取HTML从您的服务器通过Ajax和更换容器页面上的HTML内容会与Ajax。然后更新无需重新加载你的网页的布局或任何资源使用pushstate浏览器的当前URL(JS,CSS),提供了一个快速的外观,全页面加载。但它确实就是Ajax和pushstate。
点击这里查看pushState的浏览器支持情况。
// ------------------------------------------------------------------------------------------------
在ajax请求中,不能更新地址栏,地址栏上的“前进”和“后退”按钮就失效了,带来了另外一种糟糕的用户体验。
解决方案如下:
方案一:使用window. Onhashchange 事件
如下面Html片段,点击不同的连接,在mainPanel中加载不同的页面:
解决方案如下:
首先写一个方法来获取当前url中指定key的hash值,如下:
使用onhashchange事件触发ajax请求:
<script type="text/javascript">
到这里工作已经完成了80%,为什么是80%呢,这里面还有一个问题:
当你直接在浏览器(新开的标签页)的地址栏里输入这样的地址:http://localhost:3859/home/index#page=3 或者通过QQ发给你的好友,看到的并不是如你所想的应该是page=3的内容,而是http://localhost:3859/home/index 的内容。原因很简单——页面加载的时候不会触发onhashchange事件。
所以我们要在上面的代码追加一行:
onhashchange 事件location.hash发生改变的时候触发,可以很好解决AJAX刷新后退/前进键失效的问题,是一个新的事件,
目前chrome ,firefox,Opera, Safari,IE8及以上版本浏览器都兼容。
其实对于那些死抱着IE6,IE7 不放的用户,咱也没必要给他们提供这样的用户体验。
方案二:使用jQuery.History.js
对于要兼容IE6、IE7的情况,笔者一直使用jquery.history.js 这个插件(http://plugins.jquery.com/history/)。
这个插件它会去判断浏览器是否支持onhashchange事件,如果不支持,就定时(每个100毫秒)循环判断hash有没有变化,从而执行相应处理。
如:
另外,这个插件已经不再继续更新维护了。
方案三:jquery.ba-hashchange.js
jquery.ba-hashchange.js(http://benalman.com/projects/jquery-hashchange-plugin/)
这个插件的实现原理和jquery.history.js 完全一样。循环间隔为50毫秒。
它overwrite 了window.hashchange事件,使其能够兼容全部浏览器。
使用如下:
Ajax保留浏览器历史的解决方案
http://www.bootcdn.cn/jquery.pjax/
简介
pjax是一个jQuery插件,使用ajax和pushState技术提供快速的浏览体验与真正的永久链接、网页标题、以及浏览器的后退前进按钮操作。pjax通过抓取HTML从您的服务器通过Ajax和更换容器页面上的HTML内容会与Ajax。然后更新无需重新加载你的网页的布局或任何资源使用pushstate浏览器的当前URL(JS,CSS),提供了一个快速的外观,全页面加载。但它确实就是Ajax和pushstate。
点击这里查看pushState的浏览器支持情况。
概述
pjax不是全自动的。您需要设置和指定一个包含在您的页面上的元素,当您浏览您的网站时将被替换。// ------------------------------------------------------------------------------------------------
在ajax请求中,不能更新地址栏,地址栏上的“前进”和“后退”按钮就失效了,带来了另外一种糟糕的用户体验。
解决方案如下:
方案一:使用window. Onhashchange 事件
如下面Html片段,点击不同的连接,在mainPanel中加载不同的页面:
解决方案如下:
<ul class="menu"> <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值,如下:
<script type="text/javascript"> //获取指定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请求:
<script type="text/javascript">
到这里工作已经完成了80%,为什么是80%呢,这里面还有一个问题:
当你直接在浏览器(新开的标签页)的地址栏里输入这样的地址:http://localhost:3859/home/index#page=3 或者通过QQ发给你的好友,看到的并不是如你所想的应该是page=3的内容,而是http://localhost:3859/home/index 的内容。原因很简单——页面加载的时候不会触发onhashchange事件。
所以我们要在上面的代码追加一行:
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> $(loadPanel); //或者 $(function(){ $(window).trigger("hashchange"); });
onhashchange 事件location.hash发生改变的时候触发,可以很好解决AJAX刷新后退/前进键失效的问题,是一个新的事件,
目前chrome ,firefox,Opera, Safari,IE8及以上版本浏览器都兼容。
其实对于那些死抱着IE6,IE7 不放的用户,咱也没必要给他们提供这样的用户体验。
方案二:使用jQuery.History.js
对于要兼容IE6、IE7的情况,笔者一直使用jquery.history.js 这个插件(http://plugins.jquery.com/history/)。
这个插件它会去判断浏览器是否支持onhashchange事件,如果不支持,就定时(每个100毫秒)循环判断hash有没有变化,从而执行相应处理。
如:
<script src="/Scripts/jquery.history.js" type="text/javascript"></script> <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 src="/Scripts/jquery.ba-hashchange.js" type="text/javascript"></script> <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保留浏览器历史的解决方案
相关文章推荐
- 为Sublime Text提供的jQuery插件
- jQuery属性选择器选择动态变量
- jQuery UI 之 LigerUI 快速入门
- jQuery选择器
- 在线jquery编辑调试的网站
- 基于jquery中children()与find()的区别介绍
- jQuery 中 attr() 和 prop() 方法的区别
- 常用jQuery代码
- jQuery中的join方法
- <h1 class="title">jquery的checkbox,radio,select等方法总结</h1> <div class="meta"><time datetime="201
- Jquery文字滚动效果
- jquery右下角弹出提示框
- jquery右下角弹出提示框
- jquery validation用法
- JQuery 淡入淡出3
- JQuery 淡入淡出1
- JQuery 淡入淡出2
- 米到环球-地址栏-单选框的jquery处理,非典型的tab选项卡处理思维
- 自定义裁剪和缩放图像的jQuery插件Cropit使用的大坑
- jquery 判断一组checkbox是否被选中