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

Question

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

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

Answer 1

Поместите pointer-events: none; в стили для рамки.

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

Answer 2

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

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

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

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

Answer 3

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

$("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>

Answer 4

Вы должны посмотреть, как объединить привязку родительского события document к событию document.getElementById('iFrameId').contentDocument, ведь вы получите доступ к элементам содержимого 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'));

Answer 5

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

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

Answer 6

ЭТО РАБОТАЕТ ДЛЯ МЕНЯ, комбинируя привязку события родительского документа с document.getElementById ('iFrameId'). Событие contentDocument, позволяющее вам получить доступ к элементам содержимого 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;

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

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