Оверлей iframe на другом iframe

Question

У меня есть код javascript, с помощью которого iframe перемещается с указателем мыши. , и когда я нажимаю мышь над другим iframe (e.x youtube embed video), iframe не перемещается с помощью мыши, в то время как указатель мыши находится на видео на YouTube.

что можно сделать? спасибо

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

Если вам не нужно, чтобы позволить пользователям взаимодействовать с содержимым фрейма, вы можете обмануть это путем наложения прозрачного 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, это вряд ли это будет удовлетворять ваши требования, так как взаимодействие с пользователем является ключевой частью впечатления от просмотра.