近日領導對于統計相關的工作高度關注，責成相關工作人員（我）真抓實干（加班加點），急群眾（領導）之所急，想群眾（領導）之所想，盡快落實相關工作...具體來說就是給我們的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?，F在說一下這個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 });

?

? ?

?

?

?

?

?

轉載于:https://www.cnblogs.com/xinyan-666/p/9572369.html

總結

以上是生活随笔為你收集整理的关闭页面那点事儿...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。