History.js 无刷新改变浏览器 URL 的插件 - 文章教程

History.js 无刷新改变浏览器 URL 的插件

发布于 2019-06-06 字数 4455 浏览 2276 评论 0

History.js 是一个功能非常强大的插件,不依赖于任何第三方插件库,支持 HTML5 History/State APIs (pushState, replaceState, onPopState),并使之在所有浏览器上都可用。包括继续支持 data, titles, replaceState. Supports jQuery, MooTools and Prototype 等。

对于 HTML5 浏览器而言意味着你可以直接修改 URL 地址。

特点

  • 使用 HTML5 History API 尽可能多的完成更多的工作。
  • 提供所有 HTML5 浏览器兼容经验(他们所有的 HTML5 的历史 API 有点不同导致不同的行为实施有时错误-修复了这个history.js保证经验预期/同/伟大的在HTML5的浏览器)
  • 提供使用哈希回退所有 HTML4 浏览器的向后兼容的经验(包括对HTML5的历史API的data, title, pushStatereplaceState继续支持)提供选项来删除HTML4支持如果您的应用程序是不正确的。
  • 提供多种HTML4和HTML5向前兼容的经验(如果一个哈希fallbacked URL是由HTML5浏览器很自然地转化为它的等效非哈希URL访问)
  • 支持许多 JavaScript 框架可以通过适配器;特别是 Dojo, ExtJS, jQuery, MooTools, Right.jsZepto

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

浏览器兼容

HTML5 Browsers

  • Firefox 4+
  • Chrome 8+
  • Opera 11.5+
  • Safari 5.0+
  • Safari iOS 4.3+

HTML4 Browsers

  • IE 6, 7, 8, 9, (10)
  • Firefox 3
  • Opera 10, 11.0
  • Safari 4
  • Safari iOS 4.2, 4.1, 4.0, 3.2

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

Jay

文章 0 评论 0

guowei007

文章 0 评论 0

2668157715

文章 0 评论 0

HY阳

文章 0 评论 0

想挽留

文章 30 评论 3