•  

html页面监听跨域iframe点击事件案例

2017-12-17

以前看一个网友留言,他投放了广告,广告都是通过iframe生成的,里面涉及到跨域问题,当用户点击了广告后,不再显示这个广告信息给用户,经过很久的查阅今天终于有所收获.今天我就来讲讲这个解决方案的思路。


html中document对象有一个activeElement对象,这个对象是这么解释的。

定义和使用

activeElement 属性返回文档中当前获得焦点的元素。
语法: document.activeElement
注意: 该属性是只读的。
e l ement.foc u s ( ): 为元素设置焦点,
document.hasFocus(): 查看当前元素是否获取焦点。


那么这个方案的思路是这样的,如果iframe内容被点击后,那么iframe就是当前获取焦点的元素了,我们设置一个轮询来判断这个iframe是不是获得了焦点,如果获得了焦点就触发事件。

完整示例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var IframeOnClick = {
            iframes: [],//存储界面的iframe对象
            interval: 3000,//监听的频率,单位毫秒
            Iframe: function () {
                this.element = arguments[0];//iframe元素
                this.cb = arguments[1];//回调
                this.hasTracked = false;//是否已经触发
            },
            track: function (element, cb) {
                this.iframes.push(new this.Iframe(element, cb));
            },
            doit: function () {
                //定时检测
                setInterval(function () {
                    IframeOnClick.checkClick();
                }, this.interval);
            },
            checkClick: function () {
                //当前文档获取焦点的元素
                var activeElement = document.activeElement;
                if (activeElement) {
                    for (var i in this.iframes) {
                        //判断当前焦点元素是不是iframe对象
                        if (activeElement === this.iframes[i].element) { //如果iframe元素被点击后,就会获得焦点
                            if (this.iframes[i].hasTracked == false) {//只触发一次,如果每次都要触发,可以去掉判断
                                this.iframes[i].cb.apply(activeElement, []);
                                this.iframes[i].hasTracked = true;
                            }
                        } else {
                            this.iframes[i].hasTracked = false;
                        }
                    }
                }
            }
        };

        window.onload = function () {
            var allframe = document.getElementsByTagName('iframe');
            for (var i = 0; i < allframe.length; i++) {
                IframeOnClick.track(allframe[i], function () {
                    //监听后你想做的
                   alert('iframe['+this.name+"]被点击了");
                });
            }
            IframeOnClick.doit();
        }

    </script>

</head>

<body>

<iframe name="itmayun" src="http://www.itmayun.com" width="100%" height="300px"></iframe>
<iframe name="oschina" src="http://www.oschina.net" width="100%" height="300px"></iframe>

</body>
</html>


申明:本文受法律保护,未经作者同意不得用于商业用途,如转载请说明出处!
评论