在另一个iframe上覆盖一个iframe

Question

我有一个javascript代码，使用它的iframe随鼠标指针移动。 当我将鼠标滑过另一个iframe（e.x youtube embed video）时，当鼠标指针位于YouTube视频上时，iframe不会随鼠标移动。

可以做些什么？谢谢

<script type="text/javascript"> 
var opacity = 1; 
var time = 3500000; 
if (document.cookie.indexOf('visited=true') == -1) { 
    (function openColorBox() { 
     if ((document.getElementById) && window.addEventListener || window.attachEvent) { 
      var hairCol = "#ff0000"; 
      var d = document; 
      var my = -10; 
      var mx = -10; 
      var r; 
      var vert = ""; 
      var idx = document.getElementsByTagName('div').length; 
      var thehairs = "<iframe id='theiframe' scrolling='no' frameBorder='0' allowTransparency='true' src='b.html' style='margin: px 0px 0px px; position:fixed;width:200px;height:200px;overflow:hidden;border:0;opacity:" + opacity + ";filter:alpha(opacity=" + opacity * 100 + ");'></iframe>"; 
      document.write(thehairs); 
      var like = document.getElementById("theiframe"); 
      document.getElementsByTagName('body')[0].appendChild(like); 
      var pix = "px"; 
      var domWw = (typeof window.innerWidth == "number"); 
      var domSy = (typeof window.pageYOffset == "number"); 
      if (domWw) r = window; 
      else { 
       if (d.documentElement && typeof d.documentElement.clientWidth == "number" && d.documentElement.clientWidth != 0) r = d.documentElement; 
       else { 
        if (d.body && typeof d.body.clientWidth == "number") r = d.body 
       } 
      } 
      if (time != 0) { 
       setTimeout(function() { 
        document.getElementsByTagName('body')[0].removeChild(like); 
        if (window.addEventListener) { 
         document.removeEventListener("mousemove", mouse, false) 
        } else if (window.attachEvent) { 
         document.detachEvent("onmousemove", mouse) 
        } 
       }, time) 
      } 

      function scrl(yx) { 
       var y, x; 
       if (domSy) { 
        y = r.pageYOffset; 
        x = r.pageXOffset 
       } else { 
        y = r.scrollTop; 
        x = r.scrollLeft 
       } 
       return (yx == 0) ? y : x 
      } 

      function mouse(e) { 
       var msy = (domSy) ? window.pageYOffset : 0; 
       if (!e) e = window.event; 
       if (typeof e.pageY == 'number') { 
        my = e.pageY - 0 - msy; 
        mx = e.pageX - 0 
       } else { 
        my = e.clientY - 6 - msy; 
        mx = e.clientX - 6 
       } 
       vert.top = my + scrl(0) + pix; 
       vert.left = mx + pix 
      } 

      function ani() { 
       vert.top = my + scrl(0) + pix; 
       setTimeout(ani, 300) 
      } 

      function init() { 
       vert = document.getElementById("theiframe").style; 
       ani() 
      } 
      if (window.addEventListener) { 
       window.addEventListener("load", init, false); 
       document.addEventListener("mousemove", mouse, false) 
      } else if (window.attachEvent) { 
       window.attachEvent("onload", init); 
       document.attachEvent("onmousemove", mouse) 
      } 
     } 
    })(); 
    var oneDay = 1000 * 60 * 30; 
    var expires = new Date((new Date()).valueOf() + oneDay); 
    document.cookie = "visited=true;expires=" + expires.toUTCString() 
} 
</script> 

<iframe width="420" height="315" src="https://www.youtube.com/embed/sTesehdHbqs" style="display:block; position:static;"frameborder="0" allowfullscreen></iframe> 

Answer 1

没有看到你的HTML，最好的猜测是：你不能这样做。问题在于，一旦将鼠标移动到页面起源不同的iframe中，鼠标事件就不会触发到脚本，因此您将无法更新iframe的位置。 DEMO：请注意，如果将鼠标指针移动到iframe中，鼠标坐标将如何停止更新。

function mouseMoveListener() { 
 
    var outputX = document.querySelector('#mouseX'); 
 
    var outputY = document.querySelector('#mouseY'); 
 
    return function(ev) { 
 
    outputX.innerText = ev.clientX; 
 
    outputY.innerText = ev.clientY; 
 
    }; 
 
} 
 

 
function test(ev) {console.log('ev::', ev.clientX);} 
 

 
document.addEventListener('mousemove', mouseMoveListener());

<div>Mouse position: 
 
     <span id="mouseX"></span> 
 
     , 
 
     <span id="mouseY"></span> 
 
    </div> 
 

 
    
 
    <iframe src="http://www.example.com" width="200" height="200"></iframe>

如果你不需要让用户用iframe的内容进行交互，可以通过iframe的顶部覆盖透明DIV欺骗这一点。这样可以防止鼠标事件“落入”下面的iframe，同时仍显示iframe的内容。 DEMO：但请注意，iframe不允许您滚动，因为鼠标事件（如滚动条或滚轮事件的点击）由覆盖div捕获。

function mouseMoveListener() { 
 
    var outputX = document.querySelector('#mouseX'); 
 
    var outputY = document.querySelector('#mouseY'); 
 
    return function(ev) { 
 
    outputX.innerText = ev.clientX; 
 
    outputY.innerText = ev.clientY; 
 
    }; 
 
} 
 

 
function test(ev) {console.log('ev::', ev.clientX);} 
 

 
document.addEventListener('mousemove', mouseMoveListener());

#iframe-wrapper { 
 
    position: relative; 
 
} 
 

 
#iframe-wrapper iframe { 
 
    position: relative; 
 
    z-index: 0; 
 
} 
 

 
#iframe-wrapper .overlay { 
 
    position: absolute; 
 
    background: transparent; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    z-index: 2; 
 
}

<div>Mouse position: 
 
    <span id="mouseX"></span> 
 
    , 
 
    <span id="mouseY"></span> 
 
</div> 
 

 
<div id="iframe-wrapper"> 
 
    <iframe src="http://www.example.com" width="200" height="200"></iframe> 
 
    <div class="overlay"></div> 
 
</div>

但是，如果你显示一个YouTube视频，这是不可能的，这将满足您的要求，因为用户交互的视觉体验的重要组成部分。