window.history跳轉的實質

1、簡介

window.history是用來保存用戶在一個會話期間的網站訪問記錄,並提供相應的方法進行追溯。其對應的成員如下:
方法:back()、forward()、go(num)、pushState(stateData, title, url)、replaceState(stateData, title, url)
屬性:length、state
事件:window.onpopstate
以上紅色標註的爲HTML5新增特性。
  方法說明:
        back():回退到上一個訪問記錄;
forward():前進到下一個訪問記錄;
        go(num):跳轉到相應的訪問記錄;其中num大於0,則前進;小於0,則後退;
        pushState(stateData, title, url):在history中創建一個新的訪問記錄,不能跨域,且不造成頁面刷新;
        replaceState(stateData, title, url):修改當前的訪問記錄,不能跨域,且不造成頁面刷新;
另,HTML5新增了可以監聽history和hash訪問變化的全局方法:
    window.onpopstate:當調用history.go()、history.back()、history.forward()時觸發;pushState()\replaceState()方法不觸發。
    window.onhashchange:當前 URL 的錨部分(以 '#' 號爲開始) 發生改變時觸發。觸發的情況如下:
      a、通過設置Location 對象 的 location.hash 或 location.href 屬性修改錨部分;
      b、使用不同history操作方法到帶hash的頁面;
      c、點擊鏈接跳轉到錨點。

2、瀏覽器history的發展

我們知道在使用location.href、a標籤的href[非錨點的方式]等,進行頁面訪問時,頁面會刷新。但隨着大前端時代的到來,產生了異步單頁來提升性能。我們不再希望每次的跳轉都帶來頁面的刷新,而是希望這種跳轉僅僅引發數據變化,從而改變視圖。

  此時,產生了HTML5 history API。這些API,是爲了解決異步單頁的路由問題,使得頁面在不刷新的情況下,帶來視圖的變化,同時變化後的信息能得到準確的傳播。

  下面來看看一個應用場景的實例:我們在訪問一個新聞列表頁,找到一篇感興趣的新聞,文章的內容通過ajax的方式獲取到。我們覺得這篇文章很有趣,並將其分享給了朋友們。如果url地址沒有變化,朋友們訪問的將是列表頁,而非有趣的文章。而通過HTML5的API,在異步請求ajax的同時,我們可以改變url地址,朋友們訪問的也正是這篇文章。

  那麼,
    讓我們來看看window.history是如何工作的吧~~~

3、瀏覽器history變化與瀏覽器的行爲

                                                                         history棧變更圖

如圖,展示了初始長度爲4的history棧,在不同操作方法下的變化情況,下面對每步進行分析:
step1~step4:均爲history的訪問方法,獲取相應的歷史記錄中的url;
step5:通過location.href創建一個新的url記錄,其將當前url2之後的記錄清空,並在其後新增url5;history長度由4變成3;history的每次新增操作,都會將其後記錄清空,在其後新增記錄。
step6:通過pushState方法創建一個新的url記錄,其也是清空、再新增記錄;
step8:通過replaceState方法修改一個url記錄,其不會產生新記錄,而是將當前記錄進行修改。
值得注意的是,通過pushState新增或者修改的history記錄,被訪問時,當前頁面不刷新。而locaiton.href生成的記錄被訪問時,頁面將進行刷新。


原文鏈接:http://www.cnblogs.com/hity-tt/p/7059192.html


發佈了17 篇原創文章 · 獲贊 0 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章