Как заставить IFRAME прослушивать те же события, что и родительский (и запускать те же обработчики)

Question

У меня есть HTML-страница (родитель) со встроенным IFRAME. На родительской странице есть пара прослушивателей событий мыши и клавиатуры, как показано ниже (я использую библиотеку Prototype).

var IdleMonitor = Class.create({

    active: null,
    initialize: function(ii) {
        Element.observe(window, "mousemove", this.sendActiveSignal.bind(this));
    },

    sendActiveSignal: function() {
        console.log("MOUSE");
    }
});

var idleMonitor = new IdleMonitor();

IFRAME, будучи отдельным документом и прочим, не отвечает на события родителя. Поэтому я установил некоторый код в IFRAME, например:

<script type="text/javascript" >

        Element.observe(window, "mousemove", function(p) {
            parent.sendActiveSignal();

        });
</script>

Но это дает мне ошибку (sendActiveSignal - неопределенная функция). Как сделать так, чтобы IFRAME также прослушивал те же события и запускал обработчики событий родителя, предпочтительно способом Prototype-y?

Answer 1

Прежде всего, я действительно считаю, что вы должны использовать bindAsEventListener при привязке функций в качестве прослушивателей событий. Делая это, вы получаете доступ к аргументам события. Возможно, вам понадобится позже.

В вашем случае первое, что я заметил, это то, что ваш sendActiveSignal объявлен как член вашего класса IdleMonitor. Движок JS не найдет его, если вы просто вызовете его по parent.sendActiveSignal, так как я предполагаю, что parent не является экземпляром IdleMonitor. (И это не так, я могу сказать прямо сейчас:])

Внутри вашего iframe вам нужно получить доступ к переменной idleMonitor, и вы можете сделать это, сославшись на нее следующим образом:

<script type="text/javascript">
Element.observe(window, "mousemove", function(p) { parent.document.idleMonitor.sendActiveSignal(); });
</script>

Это должно сработать, я не могу сейчас это проверить.

Answer 2

Оказывается, гораздо проще получить доступ к дочернему iframe из родительского элемента, используя свойство contentDocument элемента iframe, например,

document.observe("dom:loaded", function() {

    Element.observe($('id-of-iframe').contentDocument, "mousemove", function() {
      // call whatever...
    });
});