H5如何解監聽頁面退出需求？？？

　　事發背景(時間較久)：

　　在一個陽光明媚的一天，這天lz正在工位上悠閑的敲着代碼；說時遲那時快，運營小姐姐箭步過來，讓lz做一個挽留彈窗；我當時一聽這TM不是流氓么。於是便有了以下的故事。。。

　　如何實現：

　　眾所周知，我們一般是無法去監聽瀏覽器的返回事件的；更別說是用戶設備的物理返回鍵了；依稀記得瀏覽器確實是有個關閉事件----onbeforeunload；但是這個原意是用戶是否確定關閉此頁面，會有個彈窗出現；所以，這條路是走不了了。OMG折磨人，於是又想了想，如果我們添加一個中間頁，在這個頁面進行跳轉；如果用戶返回必將回到這個頁面，然后在進行挽留的需求；思路貌似是可以的；但這樣用戶體驗以及與我們需求的初衷是不符合的，於是又被pass；接着又想了想用hash去做監聽呢，而且頁面也不會有刷新，感覺還挺好；實踐了后發現，頁面進去改變了hash值后就會觸發一次，當用戶返回時，就不再觸發這個hashchange事件了；於是就想在瀏覽器的瀏覽記錄去動手；於是就用到了History 接口中的pushState完成這個需求；

　　如何使用：pushState /onpopstate

　　pushState見名知意就是往歷史記錄條目添加一條歷史狀態；使用方法：

　　state:'',//可以用在popstate事件中,可以通過locaton.state獲取 k
　　title: 'pushstate',//為跳轉的state傳遞一個短標題
　　url: '#'//該參數定義了新的歷史URL記錄
　　window.history.pushState(state, title,url);

　　onpopstate監聽就比較簡單：

 window.addEventListener('popstate', (e) => {
      this.callback()
    }, false)

　　兼容性：

這個是H5新特性，目前的兼容性也不是特別好；但是至少我們能夠把這個需求能夠完成，至於其他的監聽思路，lz暫時還沒想出來；也請各路大神集思廣益。。

最后lz貼上我之前寫的方法：

class _browserBack {
  init (param) {
    let {callback} = param;
    this.callback = callback;
    this.pushHistory()
    this.listenEvent()
  }
  listenEvent () {
　　if('pushState' in window.history){
　　　　window.addEventListener('popstate', (e) =>
　　　　　　this.callback()
　　　　}, false)
　　}
}

 pushHistory () { if (this.ifhasHash()) return; let state = { title: 'pushstate', url: '#' } window.history.pushState(state, 'title', '#'); } ifhasHash () { return location.href.includes('#') } }

　　文章的結尾lz推薦一篇大神的文章：https://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/

　　小弟不才，還望指教！