监听iframe中的鼠标点击事件

最新推荐文章于 2024-08-21 10:36:19 发布

Nobita Chen

最新推荐文章于 2024-08-21 10:36:19 发布

阅读量6.4k

点赞数 1

分类专栏：笔记前端开发文章标签： javascript 前端 html5

本文链接：https://blog.youkuaiyun.com/chenxiong103/article/details/121050626

版权

笔记同时被 2 个专栏收录

28 篇文章

订阅专栏

前端开发

27 篇文章

订阅专栏

是否能监听iframe中的鼠标点击？
难题1：跨源无法突破
难题2：监听无效
经各种尝试后放弃，无解！
建议：在Iframe窗体里面，执行了某个事件之后，触发父窗口页面的方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        快速选型
    </title>
    </meta>
    <style>
        #nobita-test {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 80px;
            background: #860a32;
            opacity: 0.8;
        }

        #sendMessage {
            border: none;
            color: #fff;
            font-size: 28px;
            background: none;
            text-align: center;
            margin: 0 auto;
            line-height: 80px;
            width: 100%;
        }
    </style>
</head>

<body>
    <!-- https://freeges-embedded.qa.partcommunity.com/3d-cad-models -->
    <iframe id="iframe1" frameborder="0" name="iframe1" scrolling="no"
        src="https://freeges-embedded.qa.partcommunity.com/3d-cad-models">
        <p>你的浏览器不支持iframes.</p>
    </iframe>
    <div id="nobita-test"><button id="sendMessage">查看嵌入链接地址</button></div>
</body>

</html>
<script src="../skin/index/js/jquery.min.js"></script>
<script>
    window.onload = function () {
        var w = window.outerWidth,
            h = window.outerHeight;
        console.log('视窗宽：' + w + ',高：' + h);

        var document_width = document.body.scrollWidth,
            document_height = document.body.scrollHeight;
        console.log('document-body宽：' + document_width + ',高：' + document_height);

        var myframe = parent.document.all("iframe1");
        myframe.style.width = '100%';
        myframe.style.height = '1920px';

        // alert(myframe.src);

        var btn = document.getElementById('sendMessage');
        btn.addEventListener('click', function (e) {
            e.preventDefault();
            alert(myframe.src);
        });


    }

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;  
               }  
           }  
       }  
   }  
};  

// 调用
/*
var iframe1 = document.getElementById('iframe1');
IframeOnClick.track(iframe1, function() { 
    alert('iframe被点击了！')
});
*/

/* jQuery测试
 * 不要在父窗口监控，应该是在Iframe窗体里面，执行了某个事件之后，触发父窗口页面的方法！
*/
$('body #iframe1').load(function(){
    $(this).contents().find('#PG01:j_id_2q_2_9_6_f_4_3_5').on('click', function () {
        alert('确定进行下载操作？');
    })
})
</script>