Question

我有一个带有嵌入式IFRAME的HTML页面（父级）。父页面有几个鼠标和键盘事件的事件监听器，如下所示（我正在使用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类的成员。如果你只是通过parent.sendActiveSignal调用它，JS引擎将找不到它，因为我猜这个父不是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...
    });
});

如何让IFRAME像父母那样听同样的事件（并激活相同的处理程序）

2 个答案: