Receive mousemove events from iframe, too

Question

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?

score 43 · Answer 1 · edited Nov 20 '11 at 16:24

43

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!

edited Nov 20 '11 at 16:24

Robert Munteanu

67,031
36
206
278

answered Apr 19 '11 at 20:14

cloudonshore

439
3
3

11

Yes; this is correct , but it'll disable all the other events like scrolling or highlighting . – Ashraf Aug 10 '14 at 06:26
@Ashraf working fine pointer-events:none; but its disabling all other events on the iframe loaded document, how did you resolve this problem.thanks – Sujithrao Dec 05 '17 at 12:28
7

I declared `body.dragging iframe {pointer-events: none;}` in my css and set `document.body.classList.add('dragging');` only while I needed the mousemove to fire. – Kyle Jun 20 '18 at 17:17

score 6 · Answer 2 · edited May 23 '17 at 12:25

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

Thanks much, you helped me out here a great deal. – dieterh Jan 03 '20 at 14:55 — dieterh, Jan 03 '20 at 14:55

score 4 · Accepted Answer · answered Mar 10 '11 at 14:47

4

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.

answered Mar 10 '11 at 14:47

Martin Jespersen

25,743
8
56
68

1

Ok, then I must do it with a transparent div, which is over the iframe. – Van Coding Mar 10 '11 at 14:48
I like the transparent div idea, but then how would you pass the mouse event from the iframe back to the parent? – Redtopia Mar 07 '12 at 20:05
Just pass it as an argument to a function call of your choice :) – Martin Jespersen Mar 07 '12 at 22:09

score 3 · Answer 4 · edited Oct 29 '12 at 00:29

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>

score 2 · Answer 5 · answered Feb 07 '18 at 08:08

2

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

answered Feb 07 '18 at 08:08

paraofheaven

21
1

score 1 · Answer 6 · answered Mar 14 '19 at 14:31

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

Receive mousemove events from iframe, too

6 Answers6

Linked

Related