1. 程式人生 > >用document.activeElement解決iframe跨域問題

用document.activeElement解決iframe跨域問題

監聽 app frame 使用 doc win user interval layer

iframe裏面一般都會使用別人的URL,沒有很多交互,使用document.activeElement可以對iframe進行事件監聽。
使用下面的類進行測試:


 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));
            if (!this.interval) {
                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
                            this.iframes[i].cb.apply(window, []);
                    }
                }
            }
        }
    };

            var index = layer.open({
            type: 2,
            content: ‘http://layim.layui.com‘,
            area: [‘320px‘, ‘195px‘],
            maxmin: true,
            success:function (layero,index) {
                var iframeWin = window[layero.find(‘iframe‘)[0][‘name‘]];
                IframeOnClick.track(layero.find(‘iframe‘)[0], function() { console.log("testtttt") });
            }
        });
        layer.full(index);

用document.activeElement解決iframe跨域問題