在另一個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視頻，這是不可能的，這將滿足您的要求，因爲用戶交互的視覺體驗的重要組成部分。