Получать события mousemove из iframe, тоже

У меня есть приложение javascript, которое добавляет прослушиватель mousemove в документ. Проблема: Когда мышь перемещается по iframe, функция не вызывается.

есть ли способ, чтобы пройти через такие события в корневой документ?

9
event-passthrough javascript mousemove

5 ответов

вы можете сделать это довольно легко, если документ в iframe находится на том же документе.домен.

Если у вас есть тот же документ.домен, вам нужно будет установить прослушиватель mousemove в iframe, а также передать значения на родительскую страницу.

Если документы не находятся в одном документе.домен становится довольно сложным, и вам понадобится страница iframes для запуска самого javascript, который устанавливает прослушиватель событий mousemove. и тогда вы можете сделать крест связь кадров, как описано здесь: http://softwareas.com/cross-domain-communication-with-iframes

в противном случае вам не повезло из-за той же политики происхождения, что и браузеры.

4

Put pointer-events: none; в стилях для рамки.

У меня была эта проблема, и я обнаружил, что это решение отлично работает и так просто!

32

у меня только что была такая же проблема, и я придумал это:

$("iframe").contents().find("body").mousemove(function(cursor){
        $("#console").html(cursor.pageX+":"+cursor.pageY);
    });
    $(document).mousemove(function(cursor){
        $("#console").html(cursor.pageX+":"+cursor.pageY);
    });

.contents().find("body") захватывает содержимое внутри iframe и .mousemove() можно использовать для добавления прослушивателя событий

тест html...

<div id="console"></div>
2

вы должны смотреть через объединение родителей document событие связывания с document.getElementById('iFrameId').contentDocument event, witch позволяет получить доступ к элементам содержимого iFrame.

https://stackoverflow.com/a/38442439/2768917

function bindIFrameMousemove(iframe){
    iframe.contentWindow.addEventListener('mousemove', function(event) {
        var clRect = iframe.getBoundingClientRect();
        var evt = new CustomEvent('mousemove', {bubbles: true, cancelable: false});

        evt.clientX = event.clientX + clRect.left;
        evt.clientY = event.clientY + clRect.top;

        iframe.dispatchEvent(evt);
    });
};

bindIFrameMousemove(document.getElementById('iFrameId'));
1

хотя указатель-события: нет; в стилях для фрейма можно решить эту проблему,но он отключил любые другие события в iframe, мое решение состоит в переключении значения, как:

{{pointer-events : isMoving? 'none' : 'all' }}
1