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?

Ammonify

Answer 1

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.

Exaggerative

Ok, then I must do it with a transparent div, which is over the iframe. – Ammonify

I like the transparent div idea, but then how would you pass the mouse event from the iframe back to the parent? – Psia

Just pass it as an argument to a function call of your choice :) – Exaggerative

Answer 2

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!

Blotto

Yes; this is correct , but it'll disable all the other events like scrolling or highlighting . – Comptroller

@Comptroller working fine pointer-events:none; but its disabling all other events on the iframe loaded document, how did you resolve this problem.thanks – Lusitania

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. – Orelu

Answer 3

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://mcmap.net/q/381996/-detect-mousemove-when-over-an-iframe

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

Osier

Answer 4

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>

Iquique

Answer 5

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

Urge

Answer 6

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://mcmap.net/q/381996/-detect-mousemove-when-over-an-iframe

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

Pettitoes