html5無刷新更新地址經過history.pushState()方法

儘管是上面講到的《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;

 }

}

相關文章
相關標籤/搜索