0

我需要在我的主机页面的子 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>
4

2 回答 2

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

于 2012-12-23T19:57:23.327 回答
0

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

于 2013-01-01T06:56:22.853 回答