Как я могу передать события мыши от родителя к дочернему iframe

Мне нужно использовать пользовательский интерфейс jQuery в дочернем фрейме моей страницы хоста. Моя проблема в том, что операции перетаскивания работают плохо, если пользовательская мышь перемещается за пределы дочернего iframe и в родительский. В этом случае события mousemove или mouseup больше не отправляются в элемент управления UI. Я решил это с помощью своих собственных функций графического интерфейса, просто попросив родителя передать эти события дочернему элементу для обработки, но с помощью пользовательского интерфейса jQuery я не знаю, как правильно передать эти события. В приведенном ниже примере я показываю свою неудачную попытку использования триггера для передачи события в дочерний iframe.

Кто-нибудь знает, как передать эти события дочернему iframe, и может ли пользовательский интерфейс jQuery обрабатывать их правильно?

Вот моя страница хоста:

<!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>
Источник

2 ответа

Вы можете попробовать разместить сообщения в 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.simulate.js отлично решает проблему. Все, что мне нужно было сделать, это изменить $(document).trigger("mousemove", e); в $(document).simulate("mousemove", e); и все работает.

Источник
Другие вопросы по тегам