監聽瀏覽器返回，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 一個實體 ;

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