如何让 IFRAME 监听与父级相同的事件（并触发相同的处理程序）答案

【问题标题】：How to get IFRAME to listen to same events as parent (and fire the same handlers)如何让 IFRAME 监听与父级相同的事件（并触发相同的处理程序）
【发布时间】：2009-06-15 20:45:36
【问题描述】：

我有一个嵌入了 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 方式？

【问题讨论】：

标签： javascript iframe prototypejs event-listener

【解决方案1】：

首先，我真的认为在将函数绑定为事件侦听器时应该使用 bindAsEventListener。通过这样做，您可以访问事件的参数。以后可能会用到。

在您的情况下，我注意到的第一件事是您的 sendActiveSignal 被声明为 IdleMonitor 类的成员。如果您只是通过 parent.sendActiveSignal 调用它，JS 引擎将找不到它，因为我猜测 parent 不是 IdleMonitor 实例。（事实并非如此，我现在可以说出来：]）

在您的 iframe 中，您必须访问 idleMonitor 变量，您可以通过以下方式引用它：

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

这应该可以工作，我现在无法测试。

【讨论】：

对 bindAsEventListenter() 采取的观点...谢谢但是，该函数仍未定义；一定是因为它在那个班级？
我回家后会调试它，但是如果您正确获取了 idleMonitor 成员（不是空实例或未定义值），问题可能在于原型如何创建类（函数）。我在框架和弹出窗口之间做了一些工作，它们工作得很好......我必须实现一些“魔法”才能使原型对象工作。
关于使用 contentDocument 的回答（我还没有 50 个代表点，所以我不能在那里发表评论），我不会使用它，因为：1. 跨浏览器问题：一些IE 版本不能很好地处理它。 2. 这应该在你的 iframe 文档中，如果你处理来自父对象的观察者，事情会变得一团糟。但是，嘿...这只是我;]

【解决方案2】：

事实证明，使用 iframe 元素的 contentDocument 属性从父 iframe 访问子 iframe 要容易得多，例如

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

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

【讨论】：