记录用户在页面停留的时间

需求:记录用户在某个特定页面停留的时间,之后运营人员拿到数据进行分析,从而投放广告。

技术采用:jquery

经过网上搜索,发现jquery中有个beforeunload事件能够监测浏览器关闭(包含标签页窗口关闭),具体触发机制如下图。


首先弹个1呗

$(window).on('beforeunload', function() {

    alert(1);

})

经试验,除了在ie浏览器下关闭标签页能够正常弹出1之外,其它主流浏览器皆没有反应。。。

于是草率下结论:此事件只兼容ie,不兼容主流浏览器。(是不是有点反人类)

然而,网上一番搜索看到大家的结论一致认为这个事件支持chrome,怀着对知识的好奇,无数次的打开chrome,测试关闭页面、刷新页面。。还是没有反应。

好了,最终结论:在主流浏览器中,beforeunload事件中不能包含alert、console之类的东东,否则的话会不生效。but,ie浏览器中是可以生效的。但是在chrome中可以打断点看到事件确实触发了,如图。


由此,可以大胆放心的开始码代码了。

首先,进入页面获取一个时间,然后在beforeunload中获取一个关闭页面的时间,做差运算。

得到用户停留的时间后执行$.ajax发送给服务器。

到此,需求实现。

附下代码截图,顺便对时间做了个简单的格式处理~


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,047评论 1 45
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 7,380评论 0 7
  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 8,864评论 1 11
  • 请参看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon阅读 12,052评论 2 19
  • 前端开发面试题 <a name='preface'>前言</a> 只看问题点这里 看全部问题和答案点这里 本文由我...
    自you是敏感词阅读 4,198评论 0 3