将事件绑定到iframe的内容并从iframe中触发

Question

我从我们当前的项目中发现了一个非常奇怪的 bug:

index.html（演示）和 iframe.html

做如下操作：

1）点击第一个输入框并选择任何日期。

您将看到 - "datepicker changed inside iframe!"

2）点击第二个输入框，输入一些符号，并在页面上的任何空白处按下。

您将看到 - "usual_input changed inside iframe!" + "usual_input changed outside iframe!"

在 iframe 内部：

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

绑定在index.html文件中的这些输入框上，以响应change事件：

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

绑定在iframe.html文件中的这些输入框上的change事件：

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

但是编号1在任何浏览器中都无法工作！

JQuery UI的日期选择器可以完全正确地触发更改事件。为什么我们不能在iframe之外绑定它呢？

- puchu

---

$(this).contentWindow.$("#datepicker")... 通常的输入是什么？ - JCOC611

它根本不起作用。jQuery的contents()正确选择DOM元素。这里没有错误。错误在事件中。 - puchu

糟糕，我的意思是 $(this)[0].contentWindow.$("#datepicker")，试一下，因为它返回的结果与 .find() 返回的结果不相等... - JCOC611

它有效！请将其粘贴为答案！ - puchu

Answer 1

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

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

或者这个也许可以起作用：

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

我希望你有所帮助。

- JCOC611

Answer 2

非常有趣的结论：

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

main_$可以控制iframe_$

iframe_$无法控制main_$

iframe_$无法触发主体main_$的事件

main_$(iframe).contents().find("element").bind("event");将不起作用

只有标准的(input、select和textarea)的由浏览器发送的事件可以被任何地方捕获

由JCOC611找到的最佳解决方案是暂时用iframe_$替换main_$

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

您当然可以独立使用main_$和iframe_$。

附注：

请不要忘记，在世界上最差的浏览器ie中，存在很早以前的jquery bug。

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

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

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

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

- puchu