js点击第三方广告添加点击事件

最近写了一个项目,是给PC端和app端添加第三方广告,用的是百青藤的广告代码,在写的时候遇到的问题在这里总结一下。
1. 第一个问题是个很严重的问题,广告放到app上可以正常显示,但是点击后没有反应,尝试了各种办法,也都无济于事,只能改需求辗转微信公众号上
2. 第二个问题是点击广告后需要调接口,但是点击广告就直接跳转页面了,无法触发点击事件,原因是广告生成的代码内部是iframe标签,需要给iframe添加点击事件

如何给广告添加点击事件呢?
在网上找到了两个方法,我选择用第二个方法。

第一种方法:
addEventListener('blur', function() {
   if(document.activeElement = document.getElementById('iframeu6603897_0')) {
    $.ajax({
      type: 'POST',
      url: '接口地址',
      data: {},
      success: function(res) {
          console.log(res)
      }
    })
  }
});
这种方法的原理是点击广告会跳转页面,js就会监听此页面是否失去了焦点,一旦失去了焦点就触发请求,虽然是可以实现触发点击事件,但是无论怎样操作,只要是页面失去了焦点就会触发,这样统计就不准确了。
第二种方法:
var IframeOnClick = {
      resolution: 200,  
      iframes: [],  
      interval: null,  
      Iframe: function() {  
          this.element = arguments[0];  
          this.cb = arguments[1];   
          this.hasTracked = false;  
      },  
      track: function(element, cb) {  
          this.iframes.push(new this.Iframe(element, cb));  
          var _this = this;  
              this.interval = setInterval(function() { _this.checkClick(); }, this.resolution);  
      },  
      checkClick: function() {  
          if (document.activeElement) {  
              var activeElement = document.activeElement;  
              for (var i in this.iframes) {  
                  if (activeElement === this.iframes[i].element) { // user is in this Iframe  
                      if (this.iframes[i].hasTracked == false) {   
                          this.iframes[i].cb.apply(window, []);   
                          this.iframes[i].hasTracked = true;
                          $.ajax({
                              type: 'POST',
                              url: '接口地址',
                              data: {},
                              success: function(res) {
                                  console.log(res)
                              }
                          })
                      }  
                  } else {  
                      this.iframes[i].hasTracked = false;  
                  }  
              }  
          }  
      }  
  };
var frames = document.getElementsByTagName("iframe的name");
// 要保证先获取到frames,不然不会往下执行,也就添加不上点击事件
for (var i = 0; i < frames.length; i++) {
     IframeOnClick.track(frames[i], function() { 
         jQuery(document).click();
     });
}

你可能感兴趣的:(前端,javascript,html,html5,前端)