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

【问题标题】：How can I pass mouse events from parent to child iframe如何将鼠标事件从父 iframe 传递给子 iframe
【发布时间】：2012-12-23 19:48:01
【问题描述】：

我需要在我的主机页面的子 iframe 中使用 jQuery UI。我的问题是，如果用户鼠标在子 iframe 之外移动到父 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>

【问题讨论】：

糟糕的情况...使用 iframe 很重要吗？
复杂的故事但底线是肯定的，使用 jQuery UI 是可选的，但不使用 iframe。如果我不能将事件传递给 jQuery UI，我将不得不制作自己的控件克隆。

标签： jquery events iframe mousemove

【解决方案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','*');

【讨论】：

将事件传递给我自己的代码没有问题。我需要了解的是如何将它们发布到 jQuery UI 控件，以便它们将处理它们，就好像它们进入同一个窗口一样。
对不起，伙计。您可能会遇到一个安全功能，其中事件在传递到 iframe 时并不相同，因此不足以让 jQuery 接收它。

【解决方案2】：

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

【讨论】：