為iframe添加點擊事件

今天遇到一個奇葩的需求，統計一個iframe里面的頁面被點擊的量。統計是用第三方軟件cnzz站長統計的。想法就是點擊動態添加cnzz，但是iframe沒法添加點擊事件。這就尷尬了。網上一頓搜索。。。。

  發現了  document.activeElement屬性 ：始終會引用DOM中當前獲得了焦點的元素。  

　　　　　　　　　　　　　　　　　特點：默認情況下，文檔剛剛加載完成的時候，document.activeelement中保存的是document.body元素的引用。文檔加載期間，document.activeelement的值為null。通過document.activeelement可以判斷文檔是否加載完成。

　　　　利用  document.activeElement  

　　　　　　

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
                    if (this.iframes[i].hasTracked == false) {
                        this.iframes[i].cb.apply(window, []);
                        this.iframes[i].hasTracked = true;
                    }
                } else {
                    this.iframes[i].hasTracked = false;
                }
            }
        }
    }
};

IframeOnClick.track(document.getElementById("iFrame"), function() { alert('a click'); });

　　此段代碼只能執行一次，然后又是一頓操作.....

　　//html

1. <iframe src="http://image.teapaopao.com/just/20170524/01/FJTAYD.html" width="100%" height="100%" scrolling="no" frameborder="0" id="iFrame"></iframe>
2. <input type="text" id="btn" style="width: 0; height: 0;position: absolute; left: -100000">

　　//  javascript

1. <script>
2. var IframeOnClick = {
3. resolution: 200,
4. iframes: [],
5. interval: null,
6. Iframe: function () {
7. this.element = arguments[0];
8. this.cb = arguments[1];
9. },
10. track: function (element, cb) {
11. this.iframes.push(new this.Iframe(element, cb));
12. var _this = this;
13. this.interval = setInterval(function () {
14. _this.checkClick();
15. }, this.resolution);
16. },
17. checkClick: function () {
18. if (document.activeElement) {
19. var activeElement = document.activeElement;
20. for (var i in this.iframes) {
21. if (activeElement === this.iframes[i].element) { // user is in this Iframe
22. this.iframes[i].cb.apply(window, []);
23. var btn = document.getElementById("btn")
24. btn.focus()
25. }
26. }
27. }
28. }
29. };
31. IframeOnClick.track(document.getElementById("iFrame"), function () {
32. console.log(11111);
33. });
34. </script>

　　終於實現了  每點擊一次就輸入一次~~~