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

发布于 2019-06-06 23:41:15 字数 3962 浏览 2771 评论 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, pushState 和 replaceState继续支持）提供选项来删除HTML4支持如果您的应用程序是不正确的。
提供多种HTML4和HTML5向前兼容的经验（如果一个哈希fallbacked URL是由HTML5浏览器很自然地转化为它的等效非哈希URL访问）
支持许多 JavaScript 框架可以通过适配器；特别是 Dojo, ExtJS, jQuery, MooTools, Right.js 和 Zepto。

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