關閉頁面那點事兒...

　　近日領導對於統計相關的工做高度關注，責成相關工做人員（我）真抓實幹（加班加點），急羣衆（領導）之所急，想羣衆（領導）之所想，儘快落實相關工做...具體來講就是給咱們的C端也加上統計代碼，統計用戶打開時的來源url，當前頁面類型等；跳轉時的當前url，目標url，屏幕中心tag，當前頁面類型，頁面停留時間等；頁面關閉時當前頁面類型，屏幕中心tag，當前頁面類型等。先交代下背景：B端使用了vue框架，頁面打開、關閉、跳轉均可以很方便的監聽到；C端歷史悠久使用的是FreeMarker模板引擎，統計頁面關閉時的數據不像B端那樣，藉助vue能夠很方便的監聽到。

　　初步想到了兩種方案：使用H5中新增的API：history.pushState或者使用window.onbeforeunload。

　　1.history.pushState

　　代碼以下：

1 function pushHistory() {
2   var state = {
3     title: "title",
4     url: "#"
5   };
6   window.history.pushState(state, "title", "#");
7 }

 

　　這裏的history.pushState會向window.history中push一條記錄，該記錄就是pushState的第三個參數：url。如今說一下這個pushState，它接收三個參數：狀態對象，標題，url。其中第一個參數是對象形式的狀態；第二個參數會被忽略，能夠寫成空的字符；第三個參數是url，這個url會替代當前頁面的url，若是寫成了空字符，那就是當前的地址。pushState與replaceState的區別在於前者會新增一條數據，然後者只是替換了當前url。這一點能夠在瀏覽器中看到：
 這是使用window.history.replaceState時的樣子；
 這是使用window.history.pushState時的樣子，兩者的區別就是可否後退，在後退時會觸發history.popState事件。
　　可是想來想去這和關閉頁面沒什麼關係啊，並且是HTML5的新屬性，鑑於C 端的用戶羣體，即便知足要求也要作兼容，遂放棄。
　　2.onbeforeunload
　　這個就好用多了，只須要在pnbeforeunload時向服務端發請求就行了。代碼片斷以下：

1 $(window).on("beforeunload", function () {
2         util_Pc.countClose();
3         unloadFlag = true;
4     });
5     $(window).unload(function() {
6         if(!unloadFlag){
7             util_Pc.countClose();
8         }
9     });