jQuery控制IFRAME父窗口元素

原文:http://my.oschina.net/heguangdong/blog/14988
DOM方法：
父窗口操作IFRAME：window.frames["iframeSon"].document
IFRAME操作父窗口: window.parent.document

jquery方法:
在父窗口中操作 选中IFRAME中的所有输入框： $(window.frames["iframeSon"].document).find(”:text”);
在IFRAME中操作 选中父窗口中的所有输入框：$(window.parent.document).find(”:text”);
iframe 框架的HTML：<iframe src=”test.html” id=”iframeSon” width=”700″ height=”300″ frameborder=”0″ scrolling=”auto”></iframe>
细心的朋友一下就能理解，原理其实很简单，就是用到了$(DOM对象)转换成jquery对象。

测试下:

<html>
    <head></head>
    <body>
    <form action="" name="myform" id="myform">
        <input type="text" value="" name="submittext"/><input type="button" value="提交" name="submitbutton"/>
    </form>
    <iframe src="iframe.html" frameborder="0" name="iframe1"></iframe>
    </body>
</html>
<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript">
$(function(){

/* $(myform.submitbutton).click(function(){
    $(this).parent().get(0).submit(window.frames["iframe1"].document.getElementById("showtext").innerHTML=myform.submittext.value)
    
    //alert(myform.submittext.value)
}) */

$(myform.submitbutton).click(function(){
    window.frames["iframe1"].document.getElementById("showtext").innerHTML=myform.submittext.value
    window.top.frames["iframe1"].alerthaha("你好");//调用iframe中的方法  成功!!!
    //alert(myform.submittext.value)
})

//form.submittext
//alert(window.frames["iframe1"].document.getElementById("showtext").innerHTML)

})
</script>

 

 

iframe的内容

<html>
    <head></head>
    <body>
    <div id="showtext">
    showtext
    </div>
    <script type="text/javascript">
    function alerthaha(text){
        alert(text)
    }
    </script>
    </body>
</html>

 

posted @ 2012-04-24 17:43  无敌兔  阅读(552)  评论(0)    收藏  举报