zoukankan      html  css  js  c++  java
  • 为iframe添加点击事件

    今天遇到一个奇葩的需求,统计一个iframe里面的页面被点击的量。统计是用第三方软件cnzz站长统计的。想法就是点击动态添加cnzz,但是iframe没法添加点击事件。这就尴尬了。网上一顿搜索。。。。

      发现了  document.activeElement属性 :始终会引用DOM中当前获得了焦点的元素。  

                     特点:默认情况下,文档刚刚加载完成的时候,document.activeelement中保存的是document.body元素的引用。文档加载期间,document.activeelement的值为null。通过document.activeelement可以判断文档是否加载完成。

        利用  document.activeElement  

          

    1. var IframeOnClick = {  
    2.     resolution: 200,  
    3.     iframes: [],  
    4.     interval: null,  
    5.     Iframe: function() {  
    6.         this.element = arguments[0];  
    7.         this.cb = arguments[1];   
    8.         this.hasTracked = false;  
    9.     },  
    10.     track: function(element, cb) {  
    11.         this.iframes.push(new this.Iframe(element, cb));  
    12.         if (!this.interval) {  
    13.             var _this = this;  
    14.             this.interval = setInterval(function() { _this.checkClick(); }, this.resolution);  
    15.         }  
    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.                     if (this.iframes[i].hasTracked == false) {   
    23.                         this.iframes[i].cb.apply(window, []);   
    24.                         this.iframes[i].hasTracked = true;  
    25.                     }  
    26.                 } else {  
    27.                     this.iframes[i].hasTracked = false;  
    28.                 }  
    29.             }  
    30.         }  
    31.     }  
    32. };
    33.  
    34. 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=" 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. };
    30. IframeOnClick.track(document.getElementById("iFrame"), function () {
    31. console.log(11111);
    32. });
    33. </script>

      终于实现了  每点击一次就输入一次~~~

        

  • 相关阅读:
    Ubuntu 18.04.3 更改系统语言为简体中文
    Centos7.3、nginx环境下部署hugo博客
    Centos7.3 卸载 Nginx(彻底卸载) 并重新安装 Nginx(RPM源yum安装)
    Centos7.3、nginx环境下部署hexo博客(非git推送方式)
    使用阿里云对象存储OSS+PicGo搭建图床
    Hexo博客添加LiveRe评论系统
    使用 jsDelivr CDN加速Github 仓库的图片
    解决win10一开机占用内存就飙到70%的问题
    [Andriod官方训练教程]管理Activity的生命活动之停止和重启一个Activity
    [Andriod官方训练教程]支持不同的设备之支持不同的语言
  • 原文地址:https://www.cnblogs.com/chengxu931106/p/6898689.html
Copyright © 2011-2022 走看看