关闭页面那点事儿...

　　近日领导对于统计相关的工做高度关注，责成相关工做人员（我）真抓实干（加班加点），急群众（领导）之所急，想群众（领导）之所想，尽快落实相关工做...具体来讲就是给咱们的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     });