html5无刷新更新地址经过history.pushState()方法

尽管是上面讲到的《JavaScript高级程序设计》(第二版)中提到，BOM中的location.path/query…… (window.location)在经过JavaScript更改之后，浏览器都会经过刷新来到达你更改后的URL(location的意思就是位 置。。)

而在JavaScript MVC开始流行以后，经过刷新来修改URL的方法，不由让人感到烦躁。然而HTML5中就制定了一个这样的API，能够经过方法的方式来修改URL，而又不会使浏览器刷新，就是History API。

熟悉JavaScript开发的同窗，对History确定不会陌生，其中最经典的方法就是go，经过第一个类型为整数的传输参数，能够使浏览器到达当前页面以前或以后，曾经浏览过的页面。固然，这个也是要刷新来实现的。

如今History API新增了两个方法，分别是pushState和replaceState，其实用法都同样，看Mozilla的文档也没看到它们有多大不一样，哈哈。

用法以下：

var state = { //这里能够是你想给浏览器的一个State对象，为后面的StateEvent作准备。

title : "HTML 5 History API simple demo",

 url : "yourpage"

};

 history.pushState(state, "HTML 5 History API simple demo", "yourpage");

还算简单吧，那么replaceState也是一样的用法：

var state = { //这里能够是你想给浏览器的一个State对象，为后面的StateEvent作准备。

 title : "HTML 5 History API simple demo",

url : "yourpage"};

history.replaceState(state, "HTML 5 History API simple demo", "yourpage");

State Event

既然有无刷新改变URL的方法，固然也要有响应这个改变的时间啦。

嗯，没错。就有一个popstate事件，而传入的handler函数有一个参数，就是以前在pushState的第一个参数，一个State obj。开发者能够经过这个State obj来识别行为。详细代码以下：

var state = { //这里能够是你想给浏览器的一个State对象，为后面的StateEvent作准备。

title : "HTML 5 History API simple demo",

url : "yourpage"

};

history.pushState(state, "HTML 5 History API simple demo", "yourpage");

window.onpopstate = function (e) { document.title = e.state.title;}

固然还能够这样：

var state = { //这里能够是你想给浏览器的一个State对象，为后面的StateEvent作准备。

action : "page",

 title : "HTML 5 History API simple demo",

url : "yourpage"

};

history.pushState(state, "HTML 5 History API simple demo", "yourpage");

window.onpopstate = function (e) {

switch (e.state.action) {

 case "home" :

    document.title = "HOME ……";

    $.get("index.php").done(function (data) { $("#wrapper").html(data); });

     break;

   case "page" :

     document.title = e.state.title;

     $.get(e.state.url).done(function (data) { $("#wrapper").html(data); });

   break;

 }

}