近日領(lǐng)導(dǎo)對(duì)于統(tǒng)計(jì)相關(guān)的工作高度關(guān)注，責(zé)成相關(guān)工作人員（我）真抓實(shí)干（加班加點(diǎn)），急群眾（領(lǐng)導(dǎo)）之所急，想群眾（領(lǐng)導(dǎo)）之所想，盡快落實(shí)相關(guān)工作...具體來(lái)說(shuō)就是給我們的C端也加上統(tǒng)計(jì)代碼，統(tǒng)計(jì)用戶打開(kāi)時(shí)的來(lái)源url，當(dāng)前頁(yè)面類型等；跳轉(zhuǎn)時(shí)的當(dāng)前url，目標(biāo)url，屏幕中心tag，當(dāng)前頁(yè)面類型，頁(yè)面停留時(shí)間等；頁(yè)面關(guān)閉時(shí)當(dāng)前頁(yè)面類型，屏幕中心tag，當(dāng)前頁(yè)面類型等。先交代下背景：B端使用了vue框架，頁(yè)面打開(kāi)、關(guān)閉、跳轉(zhuǎn)都可以很方便的監(jiān)聽(tīng)到；C端歷史悠久使用的是FreeMarker模板引擎，統(tǒng)計(jì)頁(yè)面關(guān)閉時(shí)的數(shù)據(jù)不像B端那樣，借助vue可以很方便的監(jiān)聽(tīng)到。

　　初步想到了兩種方案：使用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會(huì)向window.history中push一條記錄，該記錄就是pushState的第三個(gè)參數(shù)：url。現(xiàn)在說(shuō)一下這個(gè)pushState，它接收三個(gè)參數(shù)：狀態(tài)對(duì)象，標(biāo)題，url。其中第一個(gè)參數(shù)是對(duì)象形式的狀態(tài)；第二個(gè)參數(shù)會(huì)被忽略，可以寫(xiě)成空的字符；第三個(gè)參數(shù)是url，這個(gè)url會(huì)替代當(dāng)前頁(yè)面的url，如果寫(xiě)成了空字符，那就是當(dāng)前的地址。pushState與replaceState的區(qū)別在于前者會(huì)新增一條數(shù)據(jù)，而后者只是替換了當(dāng)前url。這一點(diǎn)可以在瀏覽器中看到：
這是使用window.history.replaceState時(shí)的樣子；
這是使用window.history.pushState時(shí)的樣子，二者的區(qū)別就是能否后退，在后退時(shí)會(huì)觸發(fā)history.popState事件。
　　但是想來(lái)想去這和關(guān)閉頁(yè)面沒(méi)什么關(guān)系啊，而且是HTML5的新屬性，鑒于C 端的用戶群體，即使?jié)M足要求也要做兼容，遂放棄。
　　2.onbeforeunload
　　這個(gè)就好用多了，只需要在pnbeforeunload時(shí)向服務(wù)端發(fā)請(qǐng)求就好了。代碼片段如下：
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 });

?

? ?

?

?

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/xinyan-666/p/9572369.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。