監聽瀏覽器返回，pushState，popstate 事件，window.history對象

在WebApp或瀏覽器中，會有點擊返回、後退、上一頁等按鈕實現自己的關閉頁面、調整到指定頁面、確認離開頁面或執行一些其它操作的需求。可以使用 popstate 事件進行監聽返回、後退、上一頁操作。

一、簡單介紹 history 中的操作

　　1.window.history.back()，後退

　　2.window.history.forward()，前進

　　3.window.history.go(num)，前進或後退指定數量歷史記錄

　　4.window.history.pushState(state, title, utl)，在頁面中創建一個 history 實體。直接添加到歷史記錄中。

　　　 參數：state：存儲一個對象，可以添加相關信息，可以使用 history.state 讀取其中的內容。

　　　　　　title：歷史記錄的標題（目前瀏覽器不支持）。

　　　　　　url：創建的歷史記錄的鏈接。進行歷史記錄操作時會跳轉到該鏈接。

　　5.window.history.replaceState()，修改當前的 history 實體。

　　　　 參數：state：存儲一個對象，可以添加相關信息，可以使用 history.state 讀取其中的內容。

　　　　　　　title：歷史記錄的標題（目前瀏覽器不支持）。

　　　　　　　url：創建的歷史記錄的鏈接。進行歷史記錄操作時會跳轉到該鏈接。

　　6.popstate 事件，history 實體改變時觸發的事件。

　　7.window.history.state，會獲得 history 實體中的 state 對象。

　　二、使用方法

　　　　取消預設的返回操作：

　　　　1.添加一條 history 實體作為替代原來的 history 實體

function pushHistory() {
//    第一個實體
    var state = {
        title: "index",
        url: "https://www.cnblogs.com/smallclown/"
    };
    window.history.pushState(state, "index", location.href);
// 第二個實體
    state = {
        title: "index",
        url: "https://www.cnblogs.com"
    };
    window.history.pushState(state, "index", location.href);
// 第三個實體  不要以為最後的空實體沒有用  可以解決上來就執行popstate的問題 相當於炮灰
    tate = {
        title: "index",
        url:""
    };
    window.history.pushState(state, "index", "");
}

// history.pushState(state, title, url);
// history.replaceState(state, title, url); 替換

　　　　2.監聽 popstate 事件

function addHandler() {
    pushHistory();
    window.addEventListener("popstate", function(e) {
                location.href = window.history.state.url;
            }
    });
    //或者
    window.onpopstate=function(e){
        location.href = window.history.state.url;
    }
}
addHandler();

　　PS:  每次返回都會消耗一個 history 實體，若用戶選擇取消離開，則需要繼續 pushState 一個實體 ;

　　　　如果把地址換了一個你想去的地址,就形成了一個簡單的網頁劫持