如何监听非同源页面子iframe的点击跳转事件，比如页面嵌入了百度广告的ifame

Question

需求：例如首页有文章的列表，中间会加入几个子iframe的标签广告，广告里面的a标签被点击之后 如何被父页面的首页监听到

存在的问题：如果直接监听广告的容器的点击是 监听不到的， 由于是不同源，存在跨域的原因 虽然说是跨域的原因，可是也没有底气这样说， 可是将子iframe的页面切换成自己同源的一个测试广告父页面的首页是可以监听到的

尝试方案：
1.结合浏览器的onblur事件
onblur事件会在对象失去焦点时发生
onfocus: 事件会在对象获取焦点时发生
2.鼠标的 mouseenter 事件和
鼠标的mouseout 事件
mouseenter 当鼠标指针进入（穿过）元素时
mouseout 当鼠标从元素上移开时

 function bind(el, ename, fn, cap) {
    cap = cap || false;
    if (el.addEventListener) {
        el.addEventListener(ename, fn, cap);
    } else {
        el.attachEvent("on" + ename, fn);
    }
}
bind(iframe, 'mouseenter', function (e) {
    window.focus();
    isOverIFrame = true;

});
bind(iframe, 'mouseout', function () {
    isOverIFrame = false;
});
bind(window, 'blur', function () {
    if (!isOverIFrame) return
    // 。。。
}, true);

页面进行失去焦点也就是 页面发生跳转的时候，会执行监听广告被点击的逻辑，切换后台的时候也会失去焦点 这时候设置 isOverIFrame 的默认值为false即可，

可是最后发现问题，移动端这个方案 行不通， touchustart touchend touchmove 事件没有触发，点击广告进行跳转的时间 各位大佬可以指点下移动端的处理方案吗。

本逻辑参考百姓广告加载对应百度广告的v8.js的业务逻辑。

Answer 1

目前android移动端已经找到方案，可以使用touchstart,touchmove,touchend
和样式穿透pointer-events: none 来尝试
首先在判断android浏览器的环境下
1.为iframe 添加不穿透的样式 iframe 默认是 穿透pointer-events： auto 属性

document.styleSheets.length == 0 && document.head.appendChild(document.createElement('style'))
    document.styleSheets[0].addRule('iframe', "pointer-events: none");

2.为广告的容器添加touchstart的事件，注意iframe 的样式为 pointer-events: none
才能为广告容器添加touchstart事件，这个是关键

bind(dom, 'touchstart', function(e){
 time = new Date().getTime()
 isMoved = false;
 this.querySelector('iframe').style.pointerEvents='auto';
},false)

bind(dom, 'touchmove', (e) => {
  isMoved = true
})

bind(dom, 'touchend', function(e)  {
  var d = new Date().getTime() - time
  if(!isMoved && d < 500) {
    isMoved = true
    、、执行相关的逻辑
  }
  setTimeout(() =>{
    this.querySelector('iframe').style.pointerEvents='none';
  },300);
})
bind(dom,"touchcancel", function(e) {
  isMoved = false;
  this.querySelector('iframe').style.pointerEvents='none';
})

这样广告既能跳转，也可以将点击广告的回调拿到了

Answer 2

可以给你提供一个思路就是 postMessage，监听一下 iframe 点击跳转时是否发消息了

Answer 3

把ifrome放到div里面，然后把点击事件绑定到div上面。 绑定点击事件时，绑定到捕获阶段。div和ifrome一样大