将事件绑定到 iframe 的内容并从 iframe 触发它答案

【问题标题】：bind event to iframe's content and trigger it from iframe将事件绑定到 iframe 的内容并从 iframe 触发它
【发布时间】：2011-07-13 02:08:51
【问题描述】：

我从我们当前的项目中发现了一个非常奇怪的错误：

做：

1) 点击第一个输入并选择任意日期

你会看到 - “日期选择器在 iframe 中发生了变化！”

2) 点击第二个输入，写一些符号，然后在页面的任意空白处按下

你会看到 - “iframe 中的普通输入发生了变化！” + "usual_input 已在 iframe 之外更改！"

在 iframe 内：

<input id="datepicker" /> <input id="usual_input" />

在 index.html 处绑定到此输入处的更改事件：

$(this).contents().find("#datepicker").change(... (1)
$(this).contents().find("#usual_input").change(... (2)

在 iframe.html 处绑定到此输入处的更改事件：

$("#datepicker").change(... (3)
$("#usual_input").change(... (4)

但是 №1 不能在任何浏览器中工作！

jquery ui 的日期选择器100% 正确触发更改事件。为什么我们不能在 iframe 之外绑定它？

【问题讨论】：

$(this).contentWindow.$("#datepicker")... 以及通常的输入？
它根本不起作用。 jquery contents() 正确选择 dom 元素。这里没有错误。错误在事件中
哎呀，我的意思是$(this)[0].contentWindow.$("#datepicker")，试试吧，因为它返回的内容不等于.find() 返回的内容...
它有效！请粘贴为答案！

【解决方案1】：

您可以通过以下方式访问 iframe 的窗口元素：

$(this)[0].contentWindow.$("#datepicker")

或者这个可能也可以：

this.contentWindow.$("#datepicker");

希望对你有所帮助。

【讨论】：

【解决方案2】：

非常有趣的结论：

有 2 个 jquery 对象：main_$ 和 iframe_$

main_$可以控制iframe_$

iframe_$ 无法控制 main_$

iframe_$ 无法触发事件到 main_$

main_$(iframe).contents().find("element").bind("event");不会工作

只有标准（输入、选择和文本区域）的浏览器发送的事件可以在任何地方捕获

JCOC611 找到的最佳解决方案是将 main_$ 临时替换为 iframe_$

var main_$ = $;
$ = $(iframe).get(0).contentWindow.$;
//many logick which works perfectly without iframes
$ = current_$;

你当然可以单独使用 main_$ 和 iframe_$

不记得世界上最糟糕的浏览器中非常古老的 jquery 错误 - 即

$("...").find("iframe").ready(
    function() {
        //this == iframe.contentDocument
        this.contentWindow == undefined;
    }
);

仅通过特定路径获取 iframe 的窗口

$("...").find("iframe").get(0).contentWindow

它可以跨浏览器工作！ :3

【讨论】：