0

ホスト ページの子 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>
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 に答える