从iframe接收mousemove事件

Question

我有一个javascript应用程序,它为文档添加了一个mousemove监听器.问题:当鼠标移动到iframe上时,不会调用该函数.

有没有办法将这些事件传递给根文档？

Answer 1

放入pointer-events: none;框架的样式.

我自己遇到了这个问题,发现这个解决方案效果很好而且非常简单!

Answer 2

您应该查看将父document事件绑定与事件结合起来 document.getElementById('iFrameId').contentDocument，女巫允许您访问 iFrame 内容元素。

/sf/answers/2690970761/

function bindIFrameMousemove(iframe){
    iframe.contentWindow.addEventListener('mousemove', function(event) {
        var clRect = iframe.getBoundingClientRect();
        var evt = new CustomEvent('mousemove', {bubbles: true, cancelable: false});

        evt.clientX = event.clientX + clRect.left;
        evt.clientY = event.clientY + clRect.top;

        iframe.dispatchEvent(evt);
    });
};

bindIFrameMousemove(document.getElementById('iFrameId'));

Answer 3

如果 iframe 中的文档位于同一个 document.domain 上，那么您可以很容易地做到这一点。

如果您有相同的 document.domain，则还必须在 iframe 中设置 mousemove 侦听器并将值传递到父页面。

如果文档不在同一个 document.domain 上，它会变得相当复杂，并且您将需要 iframe 页面来运行设置 mousemove 事件侦听器的 javascript 本身。然后您可以按照此处所述进行跨框架通信：http ://softwareas.com/cross-domain-communication-with-iframes

否则，由于浏览器强制执行的同源策略，您将不走运。