儘管是上面講到的《JavaScript高級程序設計》(第二版)中提到,BOM中的location.path/query…… (window.location)在經過JavaScript更改之後,瀏覽器都會經過刷新來到達你更改後的URL(location的意思就是位 置。。)php
而在JavaScript MVC開始流行以後,經過刷新來修改URL的方法,不由讓人感到煩躁。然而HTML5中就制定了一個這樣的API,能夠經過方法的方式來修改URL,而又不會使瀏覽器刷新,就是History API。html
熟悉JavaScript開發的同窗,對History確定不會陌生,其中最經典的方法就是go,經過第一個類型爲整數的傳輸參數,能夠使瀏覽器到達當前頁面以前或以後,曾經瀏覽過的頁面。固然,這個也是要刷新來實現的。瀏覽器
如今History API新增了兩個方法,分別是pushState和replaceState,其實用法都同樣,看Mozilla的文檔也沒看到它們有多大不一樣,哈哈。app
用法以下:函數
var state = { //這裏能夠是你想給瀏覽器的一個State對象,爲後面的StateEvent作準備。url
title : "HTML 5 History API simple demo",設計
url : "yourpage"htm
};對象
history.pushState(state, "HTML 5 History API simple demo", "yourpage");blog
還算簡單吧,那麼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;
}
}