网站埋点,在页面离开时掉接口提交页面信息

问题描述:今天接到个之前没处理过的需求,就是给网站的所有页面做埋点,在页面离开的时候讲此页面的编码和页面中点击了哪些按钮的信息传给后台。


有点蒙蔽

第一步:这个需求我首先要保证的是在确定在页面离开的时候要绑定的事件,经过一通百度找到了两个离开的事件:分别是onunload和onbeforeunload,首先讲一下他们两个的区别

1.onunload 是在浏览器已经获取到了下一个页面的内容,即将要替换当前页面的时候。

2.onbeforeunload是在浏览器即将向浏览器请求下一个页面的时候

onbeforeunload在onunload之前发生,onunload是无法阻止页面的更新和关闭的,而 onbeforeunload 可以做到。所以我选择了onbeforeunload这个事件。onbeforeunload有以下两种使用方法:

1.window.onbeforeunload=function(){

        return '提示信息'//  这时会出现一个确认框,问你是否要离开,里面的内容就是你自己的提示信息

}

2.window.onbeforeunload=function(){

functionName()// 在离开之前执行我们想做的操作,执行完成页面才会离开

}

显然我选择了第二种方法

第二步:找到了事件钩子,我们就该想办法在离开之前掉接口了。我首先试了下ajax的jsonp (没办法老项目用的就是这些,框架还是jquery,我也很委屈)。结果发现 状态不是期望中的200,而是canceled。。。说明接口并没有成功发出页面就跳转了,好的有一个坑出现了。(对了跟大家说个小技巧,谷歌的调试工具,默认情况下在页面跳转的时候console和network 这两栏都会刷洗没法看到之前页面的输出与接口信息,但是谷歌都提供了相应的设置看下图中的画√的地方都有preserve选项)


之后又是一通百度,发现如果在这个地方用异步的ajax的话那浏览器在你掉接口之后不管你的接口是在waiting还是connecting还是已经调用成功并返回了数据,浏览器都会直接跳到另一个页面。跟据event loop的原理分析大概的原因就是因为你跳到了另一个页面原来的event loop就会销毁,那原来的异步队列也就给销毁了。所以请求就会被终止了。所以在这里我们就不能在用异步的ajax了,应该用同步的ajax(是不是很陌生。。。啊哈哈)


其实就是把async:true;改成false就变成同步了,这样只有把这个请求执行完了才会执行$.ajax(){}这段代码后面的内容。有点类似于es6中的await的意思。然后这里提醒下,这个坑解决的时候我又发现jsonp这种跨域方式,不支持同步,不过正常其他跨域方式(服务器代理,cros等)下用post或者get都是可以的(fetch没试过还。。。)这样就完美解决了我的问题。

头一次写技术文章内容有点乱,接受批评讨论。估计这问题也不会有太多人看到···哈哈哈。自娱自乐吧。
欢迎交流微信:hellowzhenganlin

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

推荐阅读更多精彩内容

  • 五十三:请解释 JavaScript 中 this 是如何工作的。1.方法调用模式当一个函数被保存为一个对象的属性...
    Arno_z阅读 596评论 0 2
  • 第一章 入门 基本功能:访问和操作 dom 元素,控制页面样式,对页面的事件处理,与ajax完美结合,有丰富的插件...
    X_Arts阅读 1,066评论 0 2
  • 本博客转自:「作者:若愚链接:https://zhuanlan.zhihu.com/p/22361337来源:知乎...
    韩宝亿阅读 2,798评论 0 3
  • 我做了一个精致的咖啡杯,和一朵花!然后我期待一个午后暖暖的阳光,我们喝咖啡,赏花! 请您看仔细,这是一个采蘑菇的小...
    爱的冒泡阅读 531评论 4 2
  • 最喜古琴之音,不同于古筝的清雅,而是于大雅之中更添宁静,给人以更辽阔的想象天地。你听,它来了…… 天未明。山林树木...
    柔弋阅读 358评论 2 6