跨域页面日志埋点

跨域页面日志埋点

页面日志埋点通常有如下三种方法：

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;
    }