OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

history.js 一个无刷新就可改变浏览器栏地址的插件(不依赖jquery)


分享到
分类 JS开源   关键字 开源   发布 ourjs  1426582811380
注意 转载须保留原文链接,译文链接,作者译者等信息。  
示例: http://browserstate.github.io/history.js/demo/


简介


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



社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 将BootstrapJS和AngularJS结合使用以及为什么不用jQuery
  2. NativeScript的工作原理:用JavaScript调用原生API实现跨平台
  3. Session劫持与Session-ID的安全长度
  4. 用原生HTML5控件实现输入框自动提示(下拉列表补全)功能
  5. 使用Node.JS监听文件夹变化
  6. 我为什么不再用Compass写CSS(缺点分析)
  7. 微软,IBM,ARM等大公司先后加入对Node.js/io.js的支持
  8. 微软博客:Angular 2将基于TypeScript
  9. 使用Google Analytics跟踪捕获JavaScript,AngularJS,jQuery的在线错误和异常
  10. AngularJS和$scope.$apply()用法的最佳实践
  11. AirJD-简单好用的免费建站工具

 相关阅读 - JS开源
  1. history.js 一个无刷新就可改变浏览器栏地址的插件(不依赖jquery)
  2. 使用Node.JS监听文件夹变化
  3. 服务器端(NodeJS)使用jQuery选择器操作DOM(HTML/XML)
  4. Oracle发布官方版Node.JS数据库驱动
  5. 用JavaScript实现的Flash VM播放器(虚拟机)
  6. Chartist.js:一个开源的响应式前端矢量(SVG)图表库
  7. JavaScript中数学运算的安全范围及开源大整数高精度计算库
  8. Webaudio-mod-player:用HTML5音频接口播放mod音乐文件
  9. HexGL用HTML5和WebGL实现的3D赛车游戏
  10. CSS3动画效果速查参照表

 关键字 - 开源
  1. Mongoose学习参考文档——基础篇
  2. NodeJS 文件(夹)压缩/解压方案(zip/unzip)-Linux上zip相关命令
  3. QRCode:用纯JavaScript实现的微信二维码图片生成器
  4. Stop-Server:用手机关闭你的电脑
  5. 几款开源的图形化Redis客户端管理软件
  6. Node.JS如何调用Chrome打开浏览器链接地址
  7. 开源的多行字符串工具: 在JS中整段地写HTML
  8. 使用NodeJS搭建邮件自动发送服务器
  9. 15个最好用的Node.JS后端框架
  10. Github Pages疑似被封: 再也不能用Pages搭建个人博客了

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号