跨域页面日志埋点
页面日志埋点通常有如下三种方法:
1.jsonp
2.img标签
3.后台控制器访问
第一种不多说,第三种通过写个公用js函数ajax请求后台,后台方法调用埋点服务器即可,第二种和jsonp原理一致,各有优缺点:
/**
* 图像Ping
* 跨域访问:使用img标签实现
* 缺点:1、只能发送GET。2、无法访问服务器的响应文本。
* 只能用来浏览器到服务器间的单向通信。(日志统计)
* */
function _imgPing(url_) {
var _imgTag;
if(window.Image) {
_imgTag = new Image();
}
else {
var _body = document.getElementsByTagName("body")[0];
_imgTag = document.createElement('img');
_body.appendChild(_imgTag);
}
_imgTag.onload = _imgTag.onerror = function (e) {};
/*发送请求*/
_imgTag.src = url_;
}
/**
* jsonp:
* 优点:能够直接访问响应文本
* 缺点:1、不安全,访问的文本中有可能含有恶意代码 2、不容易检测是否失败。
* */
function _jsonp(args_) {
var _url = args_.url || '',
_name = args_.param.callback || 'callback_' + Math.random().toString().substr(2, 13),
_success_cb = args_.success || function (data_) {},
_error_cb = args_.error || function (e) {},
_param = args_.param || {},
_body = document.getElementsByTagName('body')[0],//获取body标签
_tag = document.createElement('script'),//创建一个script标签
_exec_flag = 0;
_param = _parseParamsToString(_param);
if(-1 < _url.indexOf("?")) {
_url += _param;
}
else {
_url += "?"+_param;
}
function _parseParamsToString(param_) {
var _arr = [];
for(var key in param_){
_arr.push(key+"="+param_[key]);
}
return _arr.join("&");
}
/*标签异步加载*/
_tag.async = true;
/*注册回调函数*/
window[_name] = function (data_) {
_exec_flag = 1;
_success_cb(data_);
/*移除script标签*/
_body.removeChild(_tag);
window[_name] = null;
};
_tag.onerror = function (e) {
_body.removeChild(_tag);
window[_name] = null;
_error_cb({ret: 0, msg: 'bad data!'});
};
_tag.onload = _tag.onreadystatechange = function (e) {
if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') {
if (0 == _exec_flag) {
_error_cb({ret: 0, msg: 'bad data!'});
}
}
};
_body.appendChild(_tag);
/*发送请求*/
_tag.src = _url;
}