也从 iframe 接收 mousemove 事件

发布于 2024-10-21 03:27:54 字数 106 浏览 5 评论 0原文

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

有没有办法将此类事件传递到根文档?

I have a javascript app, whichs adds a mousemove listener to the document. Problem:
When the mouse is moved over an iframe, the function is NOT called.

Is there a way to pass through such events to the root document?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(6

剪不断理还乱 2024-10-28 03:27:55

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

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

Put pointer-events: none; in the styles for the frame.

I was having this problem myself and found this solution works great and is so simple!

这样的小城市 2024-10-28 03:27:55

您应该查看将父 document 事件绑定与 document.getElementById('iFrameId').contentDocument 事件结合起来,这样您就可以访问 iFrame 内容元素。

https://stackoverflow.com/a/38442439/2768917

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'));

You should look through combining parent document event binding with document.getElementById('iFrameId').contentDocument event, witch allows you to get access to iFrame content elements.

https://stackoverflow.com/a/38442439/2768917

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'));
山有枢 2024-10-28 03:27:55

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

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

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

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

You can do that quite easily if the document in the iframe is on the same document.domain.

If you have the same document.domain, you will have to set a mousemove listener in the iframe as well and pass the values out to the parent page.

If the documents are not on the same document.domain it becomes quite a bit mroe complex, and you will need the iframes page to run javascript itself that sets the mousemove event listener. and then you can do cross frame communication as described here: http://softwareas.com/cross-domain-communication-with-iframes

Otherwise you are out of luck due to the same origin policy that browsers enforce.

2024-10-28 03:27:55

我刚才遇到了同样的问题,我想出了这个:

$("iframe").contents().find("body").mousemove(function(cursor){
        $("#console").html(cursor.pageX+":"+cursor.pageY);
    });
    $(document).mousemove(function(cursor){
        $("#console").html(cursor.pageX+":"+cursor.pageY);
    });

.contents().find("body") 抓取 iframe 内的内容和 .mousemove() 可用于添加事件监听器

测试html...

<div id="console"></div>

I was having the same problem just now and I came up with this:

$("iframe").contents().find("body").mousemove(function(cursor){
        $("#console").html(cursor.pageX+":"+cursor.pageY);
    });
    $(document).mousemove(function(cursor){
        $("#console").html(cursor.pageX+":"+cursor.pageY);
    });

.contents().find("body") grabs the contents inside the iframe and .mousemove() can be used to add an event listener

Test html...

<div id="console"></div>
○闲身 2024-10-28 03:27:55

虽然指针事件:无;在框架的样式中可以解决这个问题,但它禁用了 iframe 中的任何其他事件,我的解决方案是切换值,例如:

{{pointer-events : isMoving? 'none' : 'all' }}

Though pointer-events: none; in the styles for the frame can solve this problem,but it disabled any other events in iframe,my solution is to toggle the value like:

{{pointer-events : isMoving? 'none' : 'all' }}
把时间冻结 2024-10-28 03:27:55

这对我来说很有效,将父文档事件绑定与 document.getElementById('iFrameId').contentDocument 事件结合起来,它允许您访问 iFrame 内容元素。

https://stackoverflow.com/a/38442439/2768917

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;

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

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

THIS WORKS FOR ME combining parent document event binding with document.getElementById('iFrameId').contentDocument event, witch allows you to get access to iFrame content elements.

https://stackoverflow.com/a/38442439/2768917

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;

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

bindIFrameMousemove(document.getElementById('iFrameId'));
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文