JavaScript修改瀏覽器URL地址欄，不刷新頁面

使用JavaScript修改瀏覽器URL地址欄

現在主流的瀏覽器，可以在不刷新頁面的情況下修改瀏覽器URL;
在瀏覽過程中，可以將瀏覽歷史儲存起來，當在瀏覽器點擊后退按鈕時，可以沖瀏覽歷史上獲得回退的信息。

本文就介紹下它是如何工作的。
 

復制代碼代碼示例:

var stateObject = {};
var title = "Wow Title";
var newUrl = "/my/awesome/url";
history.pushState(stateObject,title,newUrl);

History 對象 pushState() 這個方法有3個參數,你可以從上面的例子看到。

第一個參數，是一個Json對象，在儲存有關當前URl的任意歷史信息。
第二個參數,title 就相當於傳遞一個文檔的標題；
第三個參數是用來傳遞新的URL. 你將看到瀏覽器的地址欄發生變化而當前頁面並沒刷新。

例子，將在每個獨立的URL中存儲一些任意數據。
 

復制代碼代碼示例:

for(i=0;i<5;i++){
  var stateObject = {id: i};
  var title = "Wow Title "+i;
  var newUrl = "/my/awesome/url/"+i;
  history.pushState(stateObject,title,newUrl);
}
 

現在運行，點擊瀏覽器的返回按鈕，查看URL是怎么改變的。
對於每次URL的改變，是因為它存儲了歷史狀態“id”以及對應的值。
但是，怎么重新獲得歷史狀態，並且在此基礎上做些事情呢？
需要對“popstate”添加事件監聽器，這將會在每次歷史對象的狀態改變的時候觸發。

例子：
 

復制代碼代碼示例:

for(i=0;i<5;i++){
  var stateObject = {id: i};
  var title = "Wow Title "+i;
  var newUrl = "/my/awesome/url/"+i;
  history.pushState(stateObject,title,newUrl);
  alert(i);
}

window.addEventListener('popstate', function(event) {
  readState(event.state);
});

function readState(data){
  alert(data.id);
}
 

現在，無論何時點擊返回按鈕，一個“popstate”事件就會被觸發。
事件偵聽器，然后檢索歷史狀態對象與之關聯的URL，並提示“id”的值。

 

RO

http://www.cnblogs.com/maorongmaomao/archive/2012/02/20/2359341.html