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

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

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


javascript mousemove event-passthrough
person Van Coding    schedule 10.03.2011    source источник

Ответы (6)


arrow_upward
4
arrow_downward

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

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

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

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

person Martin Jespersen    schedule 10.03.2011
comment
Хорошо, тогда я должен сделать это с прозрачным div, который находится поверх iframe. - person Van Coding; 10.03.2011
comment
Мне нравится идея с прозрачным div, но как тогда передать событие мыши из iframe обратно в родительский элемент? - person Redtopia; 08.03.2012
comment
Просто передайте его в качестве аргумента вызову функции по вашему выбору :) - person Martin Jespersen; 08.03.2012

arrow_upward
37
arrow_downward

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

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

person cloudonshore    schedule 19.04.2011
comment
Да; это правильно, но это отключит все другие события, такие как прокрутка или выделение. - person Ashraf; 10.08.2014
comment
@Ashraf отлично работает указатели-события: нет; но он отключает все другие события в загруженном документе iframe, как вы решили эту проблему. спасибо - person Sujithrao; 05.12.2017
comment
Я объявил body.dragging iframe {pointer-events: none;} в своем css и установил document.body.classList.add('dragging'); только тогда, когда мне нужно было движение мыши для срабатывания. - person Kyle; 20.06.2018

arrow_upward
5
arrow_downward

Вам следует просмотреть объединение привязки родительского события 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'));
person Andrii Verbytskyi    schedule 28.03.2017
comment
Большое спасибо, вы мне очень помогли здесь. - person dieterh; 03.01.2020

arrow_upward
3
arrow_downward

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

$("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>
person mark    schedule 08.04.2012

arrow_upward
2
arrow_downward

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

{{pointer-events : isMoving? 'none' : 'all' }}
person paraofheaven    schedule 07.02.2018

arrow_upward
1
arrow_downward

ЭТО РАБОТАЕТ ДЛЯ МЕНЯ, объединяя привязку события родительского документа с событием 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'));
person dieb    schedule 14.03.2019