使用JavaScript修改瀏覽器URL網址列的實作程式碼_javascript技巧

現在的瀏覽器裡,有一個十分有趣的功能，你可以在不刷新頁面的情況下修改瀏覽器URL;在瀏覽過程中.你可以將瀏覽歷史儲存起來，當你在瀏覽器點擊後退按鈕的時候，你可以沖瀏覽歷史上獲得回退的信息，這聽起來並不復雜，是可以實現的，我們來編寫一些程式碼。來看看它是如何運作的。

複製程式碼 程式碼如下:

var stateObject = {};


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=0i  var stateObject = {id: i};
  var title = "Wow Title " i;
  var newUrl = "/my/awesome/url/" i;

  history.pushState(statetory.pushState(state ,title,newUrl);}

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

程式碼如下:


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

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

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

}


現在你會看到無論什麼時候你點擊返回按鈕，一個「popstate」事件就會被觸發。我們的事件偵聽器然後檢索歷史狀態物件與之關聯的URL,並提示「id」的值。 它是非常的簡單有趣，不是嗎？

英文原文： http://hasin.me/2013/10/16/manipulating-url-using-javascript-without-freshing-the-page/