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 wa

Answer 1

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

Answer 2

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

Answer 3

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>

Answer 4

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!

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

Answer 6

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.