js點擊返回跳到指定頁面實作過程_javascript技巧

這個功能之前有簡單的帶過，這次詳細的講解下原理和存在的問題（由於是運用html5的新API 所以有兼容問題，推薦移動端使用該方法）。

功能描述：

在瀏覽器中新建標籤頁並指定一個網址，網頁載入完畢後，正常流程下是不允許點選返回的。因為目前標籤頁的相關歷史記錄是沒有的，所以沒有記錄可以回傳。

應客戶要求，需要在這種情況下，為他的歷史記錄裡添加一個連結（例如首頁），這樣在新開啟的頁面，點擊返回就可以跳到首頁，讓使用者看到系統的各種功能，推廣平台。

一、知識要點

HTML5引進了history.pushState()方法和history.replaceState()方法，它們允許你逐條地新增和修改歷史記錄條目。這些方法可以協同window.onpopstate事件一起運作。

 案例：
假設 http://mozilla.org/foo.html 將執行如下JavaScript程式碼：

複製程式碼 程式碼如下:

 var stateObj = { foo: "bar"}; stateObj, "page 2", "bar.html");

這將讓瀏覽器的網址列顯示http://mozilla.org/bar.html，但不會載入bar.html頁面也不會檢查bar. html是否存在。

假設現在使用者導航到了http://google.com，然後點擊了後退按鈕，此時，網址列將會顯示http: //mozilla.org/bar.html，且頁面會觸發popstate事件，該事件中的狀態物件（state object）包含stateObj的一個拷貝。該頁面看起來像foo.html，儘管頁面內容可能在popstate事件中被修改。

如果我們再點擊後退按鈕，URL將變回http://mozilla.org/foo.html  文件將觸發另一個popstate事件，這次的狀態對象為null。回退同樣不會改變文檔內容。

pushState()方法
pushState()有三個參數：一個狀態物件、一個標題（現在會被忽略），一個可選的URL位址。下面來單獨考察這三個參數的細節：

狀態物件（state object） — 一個JavaScript對象，與用pushState()方法建立的新歷史記錄條目關聯。無論何時使用者導覽至新建立的狀態，popstate事件都會被觸發，且事件物件的state屬性都包含歷史記錄條目的狀態物件的拷貝。

任何可序列化的物件都可以被當作狀態物件。因為FireFox瀏覽器會把狀態物件儲存到使用者的硬碟，這樣它們就能在使用者重新啟動瀏覽器之後被還原，我們強行限制狀態物件的大小為640k。如果你向pushState()方法傳遞了一個超過該限額的狀態對象，該方法會拋出異常。如果你需要儲存很大的數據，建議使用sessionStorage或localStorage。

標題（title） — FireFox瀏覽器目前會忽略這個參數，雖然以後可能會用上。考慮到未來可能會對此方法進行修改，傳一個空字串會比較安全。或者，你也可以傳入一個簡短的標題，標明將要進入的狀態。

位址（URL） — 新的歷史記錄條目的位址。瀏覽器不會在呼叫pushState()方法後載入該位址，但之後，可能會試圖載入，例如使用者重新啟動瀏覽器。新的URL不一定是絕對路徑；如果是相對路徑，它將以當前URL為基準；傳入的URL與目前URL應該是同源的，否則，pushState()會拋出異常。此參數是可選的；不指定的話則為文檔目前URL。

注意： 在 Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 至 Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) 中，傳入的物件使用JSON來進行序列化。從 Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)開始，物件使用結構化拷貝演算法來進行序列化。這將允許更多類型的物件能夠安全傳入。
某種意義上，呼叫pushState()有點類似於設定window.location='#foo'，它們都會在目前文件內建立和啟動新的歷史記錄條目。但pushState()有自己的優勢：

1、新的URL可以是任意的同源URL，與此相反，使用window.location方法時，只有僅修改 hash 才能保證停留在相同的document中。

2、依個人需求決定是否修改URL。相反，設定window.location='#foo'，只有在當前hash值不是foo時才建立新歷史記錄。

3、你可以在新的歷史記錄條目中加入抽象資料。如果使用基於hash的方法，你只能把相關資料轉碼成一個很短的字串。

注意pushState()方法永遠不會觸發hashchange事件，即便新的位址只變更了hash。

popstate事件
每當啟動的歷史記錄發生變化時，都會觸發popstate事件。如果被啟動的歷史記錄條目是由pushState所創建，或是被replaceState方法影響到的，popstate事件的狀態屬性將包含歷史記錄的狀態物件的一個拷貝。

replaceState()方法
history.replaceState()操作類似於history.pushState()，不同之處在於replaceState()方法會修改目前歷史記錄條目而非建立新的條目。

當你為了回應使用者的某些操作，而要更新目前歷史記錄條目的狀態物件或URL時，使用replaceState()方法會特別適合。

 二、實現思路
1.利用popstate事件，監聽點擊返回事件。

2.觸發事件時，判斷目前頁面的歷史記錄 是否有頁面可以回傳。

3.如果沒有頁面可以返回，則插入兩條記錄：

1）、指定的跳轉頁。

2）、空白記錄。 （使目前頁面不會改變）

 三、實作方法

 //返回之前没页面则返回首页
    function pushHistory() {
      if (history.length < 2) {
        var state = {
          title: "index",
          url: getHttpPrefix + "index.html"
        };
        window.history.pushState(state, "index", location.href);
        state = {
          title: "index",
          url: ""
        };
        window.history.pushState(state, "index", "");
      }
      //lll("history.state" + history.state)
      //console.log(history.state) 
}

判斷目前history中的記錄個數，由於頁面載入的時候，瀏覽器會自動push進一個記錄。所以要判斷長度是否小於2.

塞進去的state物件是為了取得對應的url連結。
注意點：
第一個pushState我將跳轉url放進state物件 方便跳轉操作。第二個參數沒有實際意義，因為現在的瀏覽器基本上不適用這個參數。
第三個參數是會替換目前網址列的連結的，但是頁面不會發生跳轉。 （我之前犯了個錯誤，將第三個參數設置為首頁鏈接，導致了地址欄更改為首頁鏈接，以至於在當前頁的鏈接都以首頁為基礎進行跳轉，導致頁面的所有鏈接都跳轉錯了。

  setTimeout(function () {
      pushHistory()
      window.addEventListener("popstate", function (e) {
        lll("popstate"+window.history.state)
        if (window.history.state != null && window.history.state.url != "") {
          location.href = window.history.state.url
        }
      });
    }, 300);

 這段程式碼放置在頁面的ready事件中執行，延遲300毫秒是為了將操作滯後，防止與系統pop事件衝突。

if語句為了判斷 history是否存在state對象，因為只有符合我們要求的記錄才會有我們新增的state對象 所以 根據這點可以進行頁面的跳躍操作。
這樣就可以實現我們想要的效果。

 四、寫在最後
缺點：
    1. 很明顯，如開頭提到的。只適合支援html5的瀏覽器使用。     2.由於插進了兩條記錄 ，所以 類似於 微信這種移動端的返回，需要再點擊兩次返回，才能推出頁面，回到微信聊天窗口，用戶體驗不好。

總結：

這種方法 一定還能優化和完善，只是目前我的實力不足，還不足以完善到完美的程度。

希望看到這篇文章的朋友可以得到一些啟發，或是有更好的方法實現。