Question

我需要在主页的子iframe中使用jQuery UI。我的问题是，如果用户鼠标移动到子iframe之外并进入父级，则拖动操作的效果很差。如果发生这种情况，则不再将mousemove事件或mouseup事件发送到UI控件。我已经用我自己的GUI函数解决了这个问题，只需让父将这些事件传递给子进行处理，但是使用jQuery UI我不知道如何正确地传递这些事件。在下面的示例中，我展示了使用触发器将事件传递给子iframe失败的尝试。

有没有人知道将这些事件传递给子iframe并让jQuery UI能够正确处理它们的方法？

这是我的主页：

<!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>

这是我的孩子iframe丢失鼠标事件：

<!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>

Answer 1

您可以尝试将邮件发布到iframe。有点不清楚你是如何需要孩子iframe对消息作出反应的，但这可能有助于在那里迈出一步：

将其放入iframe页面：

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

为iframe提供一个ID并在父页面中执行此操作以向iframe传递消息（可以是字符串或对象，任何内容）：

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

将其放在父母中以收听消息：

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

从iframe内部发回消息： window.parent.postMessage（'Hello Parent Page'，'*'）;

Answer 2

我发现jquery.simulate.js完美地解决了这个问题。我所要做的就是将$(document).trigger("mousemove", e);更改为$(document).simulate("mousemove", e);，一切正常。

如何将鼠标事件从父级传递给子级iframe

2 个答案: