Question

jquery 在父页面中如何获取子页面中的对象

例:现有 两个jsp页面，一个是a.jsp,另一个是b.jsp
a.jsp 的body中 的代码如下：
<iframe id="id_iframe" src="b.jsp" frameborder="0" scrolling="no" ></iframe>

b.jsp 的body中 的代码如下：
<input type = "button" value = "测试" id = "id_button_test" />

在a.jsp页面中写如下的js代码为什么打印不出来 "test" ?
var doc = document.getElementById('id_iframe').contentWindow.document;
$(doc).find("#id_button_test").click(function() {
alert("test");

});

用 alert($(doc).find("#id_button_test").length); 打印出来的是 1 ，可见获得了那个对象，但为什么click事件没有触发？

Answer 1

两点

1.既然你用jQuery了，为什么还要用getElementById()来获取元素？况且，获取iframe中元素也没这么麻烦啊

$("#id_iframe").contents().find("#id_button_test");

这不就好了。。

2.你这部分代码是写在a.jsp页面中了吧？那我估计之所以不运行，是因为你注册点击事件的时候，b.jsp页面还没有加载完。所以尽管你调试的时候能输出，但是代码里是注册不上的。把这段代码写在b.jsp的window.onload事件中

追问

有可能是这个原因，代码移到b.jsp页面中是可以的，那我想在a.jsp页面window.onload中给那个按钮注册 click事件就没法实现了么？

追答

可以实现呀，绑定iframe的onload事件，在里边处理就行了。不过因为IE跟其他浏览器的处理方式不大一样，所以稍微有些麻烦。

var iframe = $("#id_iframe")[0];
if (iframe.attachEvent){  // for IE
    iframe.attachEvent("onload", function(){
        // do your task
    });
} else {
    iframe.onload = function(){
        // do your task
    };
}

这是NCZ推荐的写法，我个人也比较推崇，这样就能办到了。

不过话说回来，你要在a.jsp中进行绑定，我基本可以肯定你的结构设计肯定是有问题的。

这样倒是能实现，不过我建议你最好还是仔细想想，重新设计结构

Answer 2

$(doc).find("#id_button_test").click(function(){
alert("test");

});
这么做，只是在按钮上注册了click事件函数，并没有触发。当你点击按钮的时候，就能看到alert弹出框了。
要触发click事件，可以使用trigger方法。
$(function(){
//注册click事件函数。
$(doc).find("#id_button_test").click(function(){
alert("test");

});
//立即触发click事件
$(doc).find("#id_button_test").trigger("click");
});

追问

就是点击按钮出不来，不知道为什么。

追答

        $(function(){
            //iframe加载完成后执行
            $("#id_iframe").load(function(){
                var $frm = $(this);
                var $contents = $frm.contents();
                $contents.find("#id_button_test").click(function(){
                   alert("TEST");
                });
            });
        });

以上代码，在IE10、Firefox 24.0 版本下测试通过。

Answer 3

$(function(){
var doc = document.getElementById('id_iframe').contentWindow.document;
$(doc).find("#id_button_test").click(function() {
alert("test");
});
});