关于iframe和母页以及iframe之间的jquery控制

来源：互联网发布：单片机的发展史编辑：程序博客网时间：2024/06/15 15:48

因为用Jquery比较好控制，所以就采用jquery，查找元素比较简单。

其实控制的关键点在于获取iframe或者主页面的文档模型根节点，即document。

母页获取iframe的文档模型 window.frames["if1"].document (有一个id 和name都为if1的iframe，之所以同时设置，是为了保持兼容火狐)；

iframe获取母页文档模型 window.parent.document；

iframe获取另一个iframe的文档模型 window.parent.window.frames["if2"].document （在iframe if1装载的页面里获取 iframe if2的文档模型，name和id都必须设置为if2，保持兼容火狐）；

现在提供一个示例，一个主页面下有两个iframe，每个iframe的页面和主页面都包含一个文本框加一个按钮，点击任何一个按钮都是其他的两个文本框内容和当前按钮对面的文本框的内容一致。

好了，下面进入实例：

ceshi.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>测试iframe</title>
<script src="jquery.js" language="javascript"></script>
<script language="javascript">
    $(function(){
        $("#btn").click(function(){
          var value=$("#neirong").val();
          $(window.frames["if1"].document).find("#sc1").val(value);
     $(window.frames["if2"].document).find("#sc2").val(value);
     });

});

</script>
</head>

smallC.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script src="jquery.js" language="javascript"></script>
<script language="javascript">
    $(function(){
       $("#btn1").click(function(){
                                     var value=$("#sc1").val();
             $(window.parent.document).find("#neirong").val(value);
                                     $(window.parent.window.frames["if2"].document).find("#sc2").val(value);

            });
});
</script>
</head>

smallC2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script src="jquery.js" language="javascript"></script>
<script language="javascript">
    $(function(){
       $("#btn2").click(function(){
                                     var value=$("#sc2").val();
             $(window.parent.document).find("#neirong").val(value);
                                     $(window.parent.window.frames["if1"].document).find("#sc1").val(value);

            });
});
</script>
</head>

点击任何一个按钮的内容都为一致：

可以看见任何一个都可以互相传值。