在另一个 iframe 上覆盖一个 iframe

Question

我有一个 javascript 代码，iframe 使用它随鼠标指针移动。 当我将鼠标滑过另一个 iframe（例如 youtube 嵌入视频）时，当鼠标指针位于 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 的位置。演示：请注意在 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 的内容。演示：但请注意，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 视频，这不太可能满足您的要求，因为用户交互是观看体验的关键部分。