jQuery CrossDomain iframe 鼠标移动功能答案

【问题标题】：jQuery CrossDomain iframe Mousemove functionjQuery CrossDomain iframe 鼠标移动功能
【发布时间】：2011-10-16 12:16:42
【问题描述】：

我正在使用代码全屏嵌入 vimeo 视频的项目：

<iframe id="iframe" src="http://player.vimeo.com/video/...../.." width="100%" height="100%" frameborder="0"></iframe>

我在父页面上使用 Mousemove 功能在 Mousemove 上显示公司徽标，如下所示：

    $(document).ready(function() {
    var $top = $('#logo');
    var $document = $(document);
    var timer = null;
    var timerIsRunning = false;

    $top.hide();

    $document.mousemove(function(e){
    e.stopPropagation();
    });
    setTimeout(function() {
                    $document.mousemove(function(e) {
                            if($top.is(':hidden')) {
                                $top.fadeIn(2000);
                            } else {
                                if(!timerIsRunning) {
                                    timerIsRunning = true;
                                    clearTimeout(timer);
                                    timer = setTimeout(function() { $top.fadeOut();  }, 15000);
                                    setTimeout(function() {timerIsRunning = true;}, 15000);
                                }
                            }
                    });
            }, 2000);

});

我的问题是浏览器没有检测到嵌入全屏视频的 Mousemove 功能，这就是为什么 Logo div 没有出现...

使用 CSS pointer-events: none; 它可以工作，但禁用了视频播放器控制。

有什么解决办法吗？

谢谢

【问题讨论】：

标签： jquery iframe vimeo mousemove

【解决方案1】：

尝试在 iframe 中附加 mousemove 事件：

$(document).ready(function() {
    var $top = $('#logo');
    var $document = $(document);
    var timer = null;
    var timerIsRunning = false;

    $top.hide();

    $document.mousemove(function(e){
    e.stopPropagation();
    });
    setTimeout(function() {
                    $('#iframe',$document).mousemove(function(e) {
                            if($top.is(':hidden')) {
                                $top.fadeIn(2000);
                            } else {
                                if(!timerIsRunning) {
                                    timerIsRunning = true;
                                    clearTimeout(timer);
                                    timer = setTimeout(function() { $top.fadeOut();  }, 15000);
                                    setTimeout(function() {timerIsRunning = true;}, 15000);
                                }
                            }
                    });
            }, 2000);

    });

【讨论】：