需求:记录用户在某个特定页面停留的时间,之后运营人员拿到数据进行分析,从而投放广告。
技术采用:jquery
经过网上搜索,发现jquery中有个beforeunload事件能够监测浏览器关闭(包含标签页窗口关闭),具体触发机制如下图。
首先弹个1呗
$(window).on('beforeunload', function() {
alert(1);
})
经试验,除了在ie浏览器下关闭标签页能够正常弹出1之外,其它主流浏览器皆没有反应。。。
于是草率下结论:此事件只兼容ie,不兼容主流浏览器。(是不是有点反人类)
然而,网上一番搜索看到大家的结论一致认为这个事件支持chrome,怀着对知识的好奇,无数次的打开chrome,测试关闭页面、刷新页面。。还是没有反应。
好了,最终结论:在主流浏览器中,beforeunload事件中不能包含alert、console之类的东东,否则的话会不生效。but,ie浏览器中是可以生效的。但是在chrome中可以打断点看到事件确实触发了,如图。
由此,可以大胆放心的开始码代码了。
首先,进入页面获取一个时间,然后在beforeunload中获取一个关闭页面的时间,做差运算。
得到用户停留的时间后执行$.ajax发送给服务器。
到此,需求实现。
附下代码截图,顺便对时间做了个简单的格式处理~