CODEWITHSUNDEEP
jqueryeventsiframemousemove
MikeO
MikeO

Reputation: 205

How can I pass mouse events from parent to child iframe

I am needing to use jQuery UI in a child iframe of my host page. My issue is that drag operations work poorly if the users mouse travels outside the child iframe and into the parent. If this happens the mousemove events or mouseup event are no longer sent to the UI control. I have solved this with my own GUI functions by simply having the parent pass these events to the child for processing but with jQuery UI I do not know how to pass these events through properly. In the sample below I show my failed attempt at using trigger to pass the event to the child iframe.

Does anyone know of a way to pass these events through to the child iframe and have jQuery UI be able to process them properly ?

Here is my host page:

<!DOCTYPE html>
<html lang="en-us">
<head>
    <script src="/SharedLib/jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        var MouseMoveCallback;
        function OnMouseMove(e) {
            if (MouseMoveCallback)
                MouseMoveCallback(e);
        }
        $(document).ready(function () {
            $(document).mousemove(OnMouseMove);
        });
    </script>
</head>
<body>
    <p>
        If your mouse strays outside of the iframe during a drag of the slide handle
        it no longer moves or detects mouseup.
    </p>
    <iframe src="EventTestChildFrame.html" style="width: 500px; height: 80px;">
    </iframe> 
</body>
</html>

Here is my child iframe which loses the mouse events:

<!DOCTYPE html>
<html lang="en-us">
<head>
    <link href="/SharedLib/jquery-ui-1.9.2.custom/css/smoothness/jquery-ui-1.9.2.custom.css" rel="stylesheet" />
    <script src="/SharedLib/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="/SharedLib/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.js"></script>
    <script type="text/javascript">
        function OnMouseMove(e) {
            // this doesn't work...
            $(document).trigger("mousemove", e);
        }
        $(document).ready(function () {
            parent.MouseMoveCallback = OnMouseMove;
            $("#slider").slider();
        });
    </script>
</head>
<body style="background-color: #D0D0D0;">
    <p>Child iframe with jQuery UI control.</p>
    <div id="slider" style="margin: 8px;"></div>
</body>
</html>

Upvotes: 0

Views: 4527

Answers (2)

MikeO
MikeO

Reputation: 205

I found that jquery.simulate.js solves the problem perfectly. All I had to do was change $(document).trigger("mousemove", e); to $(document).simulate("mousemove", e); and everything works.

Upvotes: 0

Scott
Scott

Reputation: 3765

You can try posting messages to the iframe. It's a little unclear how you need the child iframe react to the message but maybe this helps take a step there:

Put this inside the iframe page:

window.addEventListener('message',function(e) {
});

Give the iframe an ID and in the parent page and execute this to pass a message (can be a string or object, anything really) to the iframe:

document.getElementById("iframe_id").contentWindow.postMessage({ "json_example": true }, "*");

Put this in the parent to listen for the message:

window.addEventListener("message", messageReceived, false);
function messageReceived(e) {
}

From inside the iframe posting a message back out: window.parent.postMessage('Hello Parent Page','*');

Upvotes: 1

Related Questions