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

926 阅读1分钟

需求:例如首页有文章的列表,中间会加入几个子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 事件没有触发,点击广告进行跳转的时间 各位大佬可以指点下移动端的处理方案吗。