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

发布于 2019-06-06 字数 4455 浏览 741 评论 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

相关链接

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

您暂时不能评论!

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

还没有评论!

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