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

history.js 一个无刷新就可改变浏览器栏地址的插件（不依赖jquery） 2016年7月23日不静之心未分类

http://ourjs.com/detail/5507ed1b1e8c708516000007
示例： http://browserstate.github.io/history.js/demo/

简介

HTML4有一些对浏览历史的前进后退API的支持如：

Js代码

window.history.back();

window.history.forward();

window.history.go(-1);

window.history.go(1);

HTML5浏览器新添加了不刷新改变网址地址的API：

Js代码

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值进行兼容。

代码示例

Js代码

(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