BOM 瀏覽器對象模型_當前窗口的瀏覽歷史 history 對象

當前窗口的瀏覽歷史 window.history 對象

保存了當前窗口訪問過的全部頁面網址

因爲安全緣由，瀏覽器不容許腳本讀取這些地址，可是容許在地址之間導航

history.back() 至關於 history.go(-1)

瀏覽器工具欄的 「前進」 和 「後退」 按鈕，其實就是對 History 對象進行操做

• // 當前窗口訪問過多少個網頁
  window.history.length // 1
  
  // History 對象的當前狀態
  // 一般是 undefined，即未設置
  window.history.state // undefined

主要有兩個屬性

• history.length ---- 當前窗口訪問過的網址數量（包括當前網頁）
• history.state ---- history 堆棧 最上層的狀態值

5 個方法

history.back() ---- 移動到上一個網址，等同於點擊瀏覽器的後退鍵

對於第一個訪問的網址，該方法無效果

history.forward() ---- 移動到下一個網址，等同於點擊瀏覽器的前進鍵

對於最後一個訪問的網址，該方法無效果

history.go() ---- 接受一個整數做爲參數，以當前網址爲基準，移動到參數指定的網址

好比  go(1) 至關於forward()     go(-1)至關於back()

若是參數超過實際存在的網址範圍，該方法無效果

若是不指定參數，默認參數爲 0，至關於刷新當前頁面

注意： 移動到之前訪問過的頁面時，頁面一般是從瀏覽器緩存之中加載，而不是從新要求服務器發送新的網頁

history.pushState() ---- 用於在歷史中添加一條記錄

window.history.pushState(state, title, url)

不會觸發頁面刷新，只是致使 history 對象發生變化，地址欄會有反應

使用該方法以後，就能夠用 history.state屬性讀出狀態對象

• var stateObj = { foo: 'bar' };
  history.pushState(stateObj, 'page 2', '2.html');
  history.state // {foo: "bar"}

  若是 pushState 的 URL 參數設置了一個新的錨點值（即 hash），並不會觸發 hashchange 事件
• 反過來，若是 URL 的錨點值變了，則會在 history 對象建立一條瀏覽記錄
• 若是pushState()方法設置了一個跨域網址，則會報錯

這樣設計的目的是，防止惡意代碼讓用戶覺得他們是在另外一個網站上

由於這個方法不會致使頁面跳轉

接受三個參數

state ---- 一個與添加的記錄相關聯的狀態對象，主要用於 popstate 事件

該事件觸發時，該對象會傳入回調函數

也就是說，瀏覽器會將這個對象序列化之後保留在本地

從新載入這個頁面的時候，能夠拿到這個對象。

若是不須要這個對象，此處能夠填 null

title ---- 新頁面的標題

如今全部瀏覽器都忽視這個參數，因此這裏能夠填空字符串

url ---- 新的網址

必須與當前頁面處在同一個域。瀏覽器的地址欄將顯示這個網址

假定當前網址是 example.com/1.html

使用 pushState() 方法在瀏覽記錄（history 對象）中添加一個新記錄

• var stateObj = { foo: 'bar' };
  history.pushState(stateObj, 'page 2', '2.html');

加新記錄後，瀏覽器地址欄馬上顯示 example.com/2.html

但並不會跳轉到 2.html，甚至也不會檢查 2.html 是否存在，它只是成爲瀏覽歷史中的最新記錄

這時，在地址欄輸入一個新的地址(好比訪問 google.com )，而後點擊了倒退按鈕，頁面的 URL 將顯示 2.html

你再點擊一次倒退按鈕，URL 將顯示 1.html

history.replaceState() ---- 用來修改 History 對象的當前記錄，其餘都與 pushState() 方法如出一轍

假定當前網頁是 example.com/example.html

• history.pushState({page: 1}, 'title 1', '?page=1')
  // URL 顯示爲 http://example.com/example.html?page=1
  
  history.pushState({page: 2}, 'title 2', '?page=2');
  // URL 顯示爲 http://example.com/example.html?page=2
  
  history.replaceState({page: 3}, 'title 3', '?page=3');
  // URL 顯示爲 http://example.com/example.html?page=3
  
  history.back()
  // URL 顯示爲 http://example.com/example.html?page=1
  
  history.back()
  // URL 顯示爲 http://example.com/example.html
  
  history.go(2)
  // URL 顯示爲 http://example.com/example.html?page=3

popstate 事件

每當同一個文檔的瀏覽歷史（即 history 對象）出現變化時，就會觸發 popstate 事件

僅僅調用 pushState() 方法或 replaceState() 方法 ，並不會觸發該事件

該事件只針對同一個文檔，若是瀏覽歷史的切換，致使加載不一樣的文檔，該事件也不會觸發

• window.onpopstate = function (event) {
      console.log('location: ' + document.location);
      console.log('state: ' + JSON.stringify(event.state));
  };
  
  // 或者
  window.addEventListener('popstate', function(event) {
      console.log('location: ' + document.location);
      console.log('state: ' + JSON.stringify(event.state));
  });

回調函數的參數是一個event事件對象

它的 state屬性指向 pushState 和 replaceState 方法爲當前 URL 所提供的狀態對象（即這兩個方法的第一個參數）

這個 state 對象也能夠直接經過 history 對象讀取

var currentState = history.state;

注意，頁面第一次加載的時候，瀏覽器不會觸發popstate事件