history.js 一个无刷新就可改变浏览器栏地址的插件(不依赖jquery)
2015-04-13 13:29
561 查看
示例: http://browserstate.github.io/history.js/demo/
HTML5浏览器新添加了不刷新改变网址地址的API:
这些API构建单页面无刷新网站是十分有帮助的,很可惜他们在老浏览器中无法使用。history.js可以解决这个问题。
History.js优雅地支持所有浏览器的History/State的 API(pushState,replaceState,onPopState)。包括数据,title,replaceState。支持 jQuery,MooTools和Prototype。在HTML5浏览器,它使用原生API,可以直接修改URL,而无需再使用哈希值。对于HTML4 浏览器则使用Hash值进行兼容。
当在HTML4浏览器中时地址栏的变化
项目地址: https://github.com/browserstate/history.js
简介
HTML4有一些对浏览历史的前进后退API的支持如:window.history.back(); window.history.forward(); window.history.go(-1); window.history.go(1);
HTML5浏览器新添加了不刷新改变网址地址的API:
var currentState = history.state; var stateObj = { foo: "bar" }; window.history.pushState(stateObj, "page 2", "bar.html");
这些API构建单页面无刷新网站是十分有帮助的,很可惜他们在老浏览器中无法使用。history.js可以解决这个问题。
History.js优雅地支持所有浏览器的History/State的 API(pushState,replaceState,onPopState)。包括数据,title,replaceState。支持 jQuery,MooTools和Prototype。在HTML5浏览器,它使用原生API,可以直接修改URL,而无需再使用哈希值。对于HTML4 浏览器则使用Hash值进行兼容。
代码示例
(function(window,undefined){ // Bind to StateChange Event History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate var State = History.getState(); // Note: We are using History.getState() instead of event.state }); // Change our States History.pushState({state:1}, "State 1", "?state=1"); // logs {state:1}, "State 1", "?state=1" History.pushState({state:2}, "State 2", "?state=2"); // logs {state:2}, "State 2", "?state=2" History.replaceState({state:3}, "State 3", "?state=3"); // logs {state:3}, "State 3", "?state=3" History.pushState(null, null, "?state=4"); // logs {}, '', "?state=4" History.back(); // logs {state:3}, "State 3", "?state=3" History.back(); // logs {state:1}, "State 1", "?state=1" History.back(); // logs {}, "Home Page", "?" History.go(2); // logs {state:3}, "State 3", "?state=3" })(window);
效果
当在HTML5浏览器中时地址栏的变化www.mysite.com www.mysite.com/?state=1 www.mysite.com/?state=2 www.mysite.com/?state=3 www.mysite.com/?state=4 www.mysite.com/?state=3 www.mysite.com/?state=1 www.mysite.com www.mysite.com/?state=3
当在HTML4浏览器中时地址栏的变化
www.mysite.com www.mysite.com/#?state=1&_suid=1 www.mysite.com/#?state=2&_suid=2 www.mysite.com/#?state=3&_suid=3 www.mysite.com/#?state=4 www.mysite.com/#?state=3&_suid=3 www.mysite.com/#?state=1&_suid=1 www.mysite.com www.mysite.com/#?state=3&_suid=3
项目地址: https://github.com/browserstate/history.js
相关文章推荐
- jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
- jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
- jquery.fileEveryWhere.js--一个跨浏览器的file显示插件[原]
- 利用HTML5新特性改变浏览器地址后不刷新页面
- AudioPlayer.js,一个响应式且支持触摸操作的jquery音频插件
- Jquery操作Select 简单方便 一个js插件搞定
- 哇 真的是一个好插件!!!Sublime Text编辑文件后快速刷新浏览器
- PicView一个依赖JQuery的图片预览插件
- jQuery中浏览器版本判断的一个BUG,此BUG已影响到jqModal,thickbox等多个jQuery插件的应用
- 一个简单的页面弹窗插件 jquery.pageMsgFrame.js
- 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
- require.js:封装一个jQuery的toast插件
- TimergliderJS 一个基于jQuery的时间轴插件
- ZeroClipboard / jquery.zclip.min.js跨浏览器复制插件使用中遇到的问题解决
- 一个jQuery热键插件:js-hotkeys
- asp.net jquery无刷新分页插件(jquery.pagination.js)
- jquery判断浏览器版本插件,jquery-browser.js
- 适用于各浏览器支持图片预览,无刷新异步上传js插件
- javascript城市选择器,jQuery.citypicker之后又一个清爽简洁的城市选择器插件,js城市选择器,js中国城市选择,城市选择js插件
- 分享一个灰常简单好用的jQuery弹出层插件:jquery.artwl.thickbox.js