将事件附加到父代码中的 iframe 元素答案

【问题标题】：Attach event to iframe element in parent code将事件附加到父代码中的 iframe 元素
【发布时间】：2011-05-11 15:53:06
【问题描述】：

在我的应用程序中，我有一个 iframe，我想让它访问一些功能，这些功能会改变 iframe 之外的应用程序状态。此功能必须由 iframe 内部或外部的 keydown 事件触发。

在 iframe 中，我有以下代码：

window.init = function (api) {
    api.bind(document);
};

外部应用程序执行以下操作：

iframe.contentWindow.init({
    bind: function (element) {
        $(element).bind('keydown', function () {
            debugger;
        });
    }
});

这样，init 被正确调用，但keydown 事件处理程序永远不会被调用。我究竟做错了什么？

【问题讨论】：

标签： javascript jquery dom javascript-events

【解决方案1】：

如果你尝试用这种方式绑定事件：

    $(element).bind('keydown', function () {
        alert("hello");
    });

jquery 将尝试遍历父元素window 中的元素，但如果您执行以下操作，您的问题将得到解决：

    $(iframe.contentWindow.document.body).find(element).bind('keydown', function () {
        alert("hello");
    });

【讨论】：

补充一句：$(iframe.contentWindow.document.body)可以替换成$(iframe).contents()。

【解决方案2】：

问题在于 iframe 的某些部分已经附加了一个 keydown 处理程序，该处理程序会停止事件的传播，从而阻止事件到达文档并阻止调用处理程序。实际绑定没有任何问题。

【讨论】：