iframe元素也就是文档中的文档，或者好像浮动的框架(frame)。关于iframe的操作一直是一个疑难点，网上有很多这方面的文章介绍。下面我结合自己的经验，整理一下笔记记录下来。
一、页面
三个页面：父页面和两个子页面，两个子页面在父页面的两个iframe里。
1、父页面MainForm.aspx
<CODE jQuery1255503204984="2"><SPAN class=pun><%</SPAN><SPAN class=pln>@ </SPAN><SPAN class=typ>Page</SPAN><SPAN class=pln> </SPAN><SPAN class=typ>Language</SPAN><SPAN class=pun>=</SPAN><SPAN class=str>"C#"</SPAN><SPAN class=pln> </SPAN><SPAN class=typ>AutoEventWireup</SPAN><SPAN class=pun>=</SPAN><SPAN class=str>"true"</SPAN><SPAN class=pln> </SPAN><SPAN class=typ>CodeBehind</SPAN><SPAN class=pun>=</SPAN><SPAN class=str>"MainForm.aspx.cs"</SPAN><SPAN class=pln> </SPAN><SPAN class=typ>Inherits</SPAN><SPAN class=pun>=</SPAN><SPAN class=str>"Test.MainForm"</SPAN><SPAN class=pln> </SPAN><SPAN class=pun>%></SPAN><SPAN class=pln><br><br></SPAN><SPAN class=dec><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></SPAN><SPAN class=pln><BR></SPAN><SPAN class=pun><</SPAN><SPAN class=tag>html</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>xmlns</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"http://www.w3.org/1999/xhtml"</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR></SPAN><SPAN class=pun><</SPAN><SPAN class=tag>head</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>runat</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"server"</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun><</SPAN><SPAN class=tag>title</SPAN><SPAN class=pun>></</SPAN><SPAN class=tag>title</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR></SPAN><SPAN class=pun></</SPAN><SPAN class=tag>head</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR></SPAN><SPAN class=pun><</SPAN><SPAN class=tag>body</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun><</SPAN><SPAN class=tag>form</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>id</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"form1"</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>runat</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"server"</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun><</SPAN><SPAN class=tag>div</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun><</SPAN><SPAN class=tag>ul</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun><</SPAN><SPAN class=tag>li</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR> 父页面（文本失去焦点可看结果）：</SPAN><SPAN class=pun><</SPAN><SPAN class=tag>input</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>id</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"txtParent"</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>name</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"txtParent"</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>type</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"text"</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>value</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"parent"</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>onblur</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"</SPAN><SPAN class=str>iframeTest()</SPAN><SPAN class=atv>"</SPAN><SPAN class=pln> </SPAN><SPAN class=pun>/></SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun></</SPAN><SPAN class=tag>li</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun><</SPAN><SPAN class=tag>li</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun><</SPAN><SPAN class=tag>iframe</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>src</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"FrameA.aspx"</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>id</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"iframeA"</SPAN><SPAN class=pun>></</SPAN><SPAN class=tag>iframe</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun></</SPAN><SPAN class=tag>li</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun><</SPAN><SPAN class=tag>li</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun><</SPAN><SPAN class=tag>iframe</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>src</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"FrameB.aspx"</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>id</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"iframeB"</SPAN><SPAN class=pun>></</SPAN><SPAN class=tag>iframe</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun></</SPAN><SPAN class=tag>li</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun></</SPAN><SPAN class=tag>ul</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun></</SPAN><SPAN class=tag>div</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><br><br> </SPAN><SPAN class=pun><</SPAN><SPAN class=tag>script</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>type</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"text/</SPAN><STRONG><SPAN class=atv><FONT color=#810081>javascript</FONT></SPAN></STRONG><SPAN class=atv>"</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><br><br> </SPAN><SPAN class=kwd>function</SPAN><SPAN class=pln> iframeTest</SPAN><SPAN class=pun>()</SPAN><SPAN class=pln> </SPAN><SPAN class=pun>{</SPAN><SPAN class=pln><br><br> </SPAN><SPAN class=pun>}</SPAN><SPAN class=pln><br><br> </SPAN><SPAN class=pun></</SPAN><SPAN class=tag>script</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><br><br> </SPAN><SPAN class=pun></</SPAN><SPAN class=tag>form</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR></SPAN><SPAN class=pun></</SPAN><SPAN class=tag>body</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR></SPAN><SPAN class=pun></</SPAN><SPAN class=tag>html</SPAN><SPAN class=pun>></SPAN></CODE>2、子页面A
<CODE jQuery1255503204984="3"><SPAN class=pun><%</SPAN><SPAN class=pln>@ </SPAN><SPAN class=typ>Page</SPAN><SPAN class=pln> </SPAN><SPAN class=typ>Language</SPAN><SPAN class=pun>=</SPAN><SPAN class=str>"C#"</SPAN><SPAN class=pln> </SPAN><SPAN class=typ>AutoEventWireup</SPAN><SPAN class=pun>=</SPAN><SPAN class=str>"true"</SPAN><SPAN class=pln> </SPAN><SPAN class=typ>CodeBehind</SPAN><SPAN class=pun>=</SPAN><SPAN class=str>"FrameA.aspx.cs"</SPAN><SPAN class=pln> </SPAN><SPAN class=typ>Inherits</SPAN><SPAN class=pun>=</SPAN><SPAN class=str>"Test.FrameA"</SPAN><SPAN class=pln> </SPAN><SPAN class=pun>%></SPAN><SPAN class=pln><br><br></SPAN><SPAN class=dec><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></SPAN><SPAN class=pln><BR></SPAN><SPAN class=pun><</SPAN><SPAN class=tag>html</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>xmlns</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"http://www.w3.org/1999/xhtml"</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR></SPAN><SPAN class=pun><</SPAN><SPAN class=tag>head</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>runat</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"server"</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun><</SPAN><SPAN class=tag>title</SPAN><SPAN class=pun>></</SPAN><SPAN class=tag>title</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><br><br> </SPAN><SPAN class=pun><</SPAN><SPAN class=tag>script</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>type</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"text/javascript"</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><br><br> </SPAN><SPAN class=com>//子页面与父页面之间的操作 </SPAN><SPAN class=pln><BR> </SPAN><SPAN class=kwd>function</SPAN><SPAN class=pln> getParent</SPAN><SPAN class=pun>()</SPAN><SPAN class=pln> </SPAN><SPAN class=pun>{</SPAN><SPAN class=pln><br><br> </SPAN><SPAN class=pun>}</SPAN><SPAN class=pln><br><br> </SPAN><SPAN class=com>//当前子页面与另外一个子页面之间的操作</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=kwd>function</SPAN><SPAN class=pln> getAnotherChild</SPAN><SPAN class=pun>()</SPAN><SPAN class=pln> </SPAN><SPAN class=pun>{</SPAN><SPAN class=pln><br><br> </SPAN><SPAN class=pun>}</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun></</SPAN><SPAN class=tag>script</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><br><br></SPAN><SPAN class=pun></</SPAN><SPAN class=tag>head</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR></SPAN><SPAN class=pun><</SPAN><SPAN class=tag>body</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun><</SPAN><SPAN class=tag>form</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>id</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"form1"</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>runat</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"server"</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun><</SPAN><SPAN class=tag>div</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR> 子页面1（文本失去焦点可看结果）：</SPAN><SPAN class=pun><</SPAN><SPAN class=tag>input</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>id</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"txtUserName"</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>name</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"txtUserName"</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>type</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"text"</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>value</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"jeff wong"</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>onblur</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"</SPAN><SPAN class=str>getParent()</SPAN><SPAN class=atv>"</SPAN><SPAN class=pln> </SPAN><SPAN class=pun>/></SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun></</SPAN><SPAN class=tag>div</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun></</SPAN><SPAN class=tag>form</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR></SPAN><SPAN class=pun></</SPAN><SPAN class=tag>body</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR></SPAN><SPAN class=pun></</SPAN><SPAN class=tag>html</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR></SPAN></CODE>3、子页面B
<CODE jQuery1255503204984="4"><SPAN class=pun><%</SPAN><SPAN class=pln>@ </SPAN><SPAN class=typ>Page</SPAN><SPAN class=pln> </SPAN><SPAN class=typ>Language</SPAN><SPAN class=pun>=</SPAN><SPAN class=str>"C#"</SPAN><SPAN class=pln> </SPAN><SPAN class=typ>AutoEventWireup</SPAN><SPAN class=pun>=</SPAN><SPAN class=str>"true"</SPAN><SPAN class=pln> </SPAN><SPAN class=typ>CodeBehind</SPAN><SPAN class=pun>=</SPAN><SPAN class=str>"FrameB.aspx.cs"</SPAN><SPAN class=pln> </SPAN><SPAN class=typ>Inherits</SPAN><SPAN class=pun>=</SPAN><SPAN class=str>"Test.FrameB"</SPAN><SPAN class=pln> </SPAN><SPAN class=pun>%></SPAN><SPAN class=pln><br><br></SPAN><SPAN class=dec><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></SPAN><SPAN class=pln><br><br></SPAN><SPAN class=pun><</SPAN><SPAN class=tag>html</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>xmlns</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"http://www.w3.org/1999/xhtml"</SPAN><SPAN class=pln> </SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR></SPAN><SPAN class=pun><</SPAN><SPAN class=tag>head</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>runat</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"server"</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun><</SPAN><SPAN class=tag>title</SPAN><SPAN class=pun>></</SPAN><SPAN class=tag>title</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR></SPAN><SPAN class=pun></</SPAN><SPAN class=tag>head</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR></SPAN><SPAN class=pun><</SPAN><SPAN class=tag>body</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun><</SPAN><SPAN class=tag>form</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>id</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"form1"</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>runat</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"server"</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun><</SPAN><SPAN class=tag>div</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR> 子页面2（文本失去焦点可看结果）：</SPAN><SPAN class=pun><</SPAN><SPAN class=tag>input</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>id</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"txtUserNameB"</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>name</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"txtUserNameB"</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>type</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"text"</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>value</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"jeffery zhao"</SPAN><SPAN class=pun>/></SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun></</SPAN><SPAN class=tag>div</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun></</SPAN><SPAN class=tag>form</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR></SPAN><SPAN class=pun></</SPAN><SPAN class=tag>body</SPAN><SPAN class=pun>></SPAN><SPAN class=pln><BR></SPAN><SPAN class=pun></</SPAN><SPAN class=tag>html</SPAN><SPAN class=pun>></SPAN></CODE>
二、操作
1、父页面操作子页面
这个毫无疑问要在父页面MainForm.aspx文件里实现。我们修改父页面的javascript函数iframeTest，看父页面如何获取和操作子页面元素的：
<CODE jQuery1255503204984="5"><SPAN class=pln> </SPAN><SPAN class=kwd>function</SPAN><SPAN class=pln> iframeTest</SPAN><SPAN class=pun>()</SPAN><SPAN class=pln> </SPAN><SPAN class=pun>{</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=kwd>var</SPAN><SPAN class=pln> frame1 </SPAN><SPAN class=pun>=</SPAN><SPAN class=pln> document</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>getElementById</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>"iframeA"</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=kwd>var</SPAN><SPAN class=pln> frame2 </SPAN><SPAN class=pun>=</SPAN><SPAN class=pln> document</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>getElementById</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>"iframeB"</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln><br><br> </SPAN><SPAN class=kwd>var</SPAN><SPAN class=pln> frameA </SPAN><SPAN class=pun>=</SPAN><SPAN class=pln> document</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>frames</SPAN><SPAN class=pun>[</SPAN><SPAN class=str>"iframeA"</SPAN><SPAN class=pun>];</SPAN><SPAN class=pln> </SPAN><SPAN class=com>//等价于 var frameAa = document.frames.iframeA;</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=kwd>var</SPAN><SPAN class=pln> frameB </SPAN><SPAN class=pun>=</SPAN><SPAN class=pln> document</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>frames</SPAN><SPAN class=pun>[</SPAN><SPAN class=str>"iframeB"</SPAN><SPAN class=pun>];</SPAN><SPAN class=pln> </SPAN><SPAN class=com>//等价于 var frameBb = document.frames.iframeB;</SPAN><SPAN class=pln><br><br> </SPAN><SPAN class=com>//**********************************************</SPAN><SPAN class=pln><BR> alert</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>frame1 </SPAN><SPAN class=pun>==</SPAN><SPAN class=pln> frameA</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln> </SPAN><SPAN class=com>//false</SPAN><SPAN class=pln><BR> alert</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>frame2 </SPAN><SPAN class=pun>==</SPAN><SPAN class=pln> frameB</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln> </SPAN><SPAN class=com>//false</SPAN><SPAN class=pln><br><br> alert</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>frame1</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>src</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln> </SPAN><SPAN class=com>//FrameA.aspx</SPAN><SPAN class=pln><BR> alert</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>frame1</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>location</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln> </SPAN><SPAN class=com>//undefined</SPAN><SPAN class=pln><BR> alert</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>frameA</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>src</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln> </SPAN><SPAN class=com>//undefined</SPAN><SPAN class=pln><br><br> alert</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>frameA</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>location</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln> </SPAN><SPAN class=com>//location</SPAN><SPAN class=pln><BR> alert</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>frameA</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>document</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>location</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln><br><br> alert</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>frame1</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>document</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>body</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>innerHTML</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln> </SPAN><SPAN class=com>//这里返回的是MainForm.aspx的body里的innerHTML</SPAN><SPAN class=pln><BR> alert</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>frame1</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>document</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>documentElement</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>innerHTML</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln> </SPAN><SPAN class=com>//这里返回的是MainForm.aspx的html里的innerHTML</SPAN><SPAN class=pln><br><br> alert</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>frameA</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>document</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>body</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>innerHTML</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln> </SPAN><SPAN class=com>//这里返回的是FrameA.aspx的body里的innerHTML</SPAN><SPAN class=pln><BR> alert</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>frameA</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>document</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>documentElement</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>innerHTML</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln> </SPAN><SPAN class=com>//这里返回的是FrameA.aspx的html里的innerHTML</SPAN><SPAN class=pln><br><br> </SPAN><SPAN class=com>//********************************************** </SPAN><SPAN class=pln><BR> </SPAN><SPAN class=kwd>var</SPAN><SPAN class=pln> childFrameDoc </SPAN><SPAN class=pun>=</SPAN><SPAN class=pln> </SPAN><SPAN class=kwd>undefined</SPAN><SPAN class=pun>;</SPAN><SPAN class=pln><br><br> </SPAN><SPAN class=com>//取FrameA.aspx内的input文本</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=kwd>if</SPAN><SPAN class=pln> </SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>document</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>all</SPAN><SPAN class=pun>)</SPAN><SPAN class=pln> </SPAN><SPAN class=pun>{</SPAN><SPAN class=com>//IE</SPAN><SPAN class=pln><BR> childFrameDoc </SPAN><SPAN class=pun>=</SPAN><SPAN class=pln> frameA</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>document</SPAN><SPAN class=pun>;</SPAN><SPAN class=pln> </SPAN><SPAN class=com>//*** 如果是frame1,就取不到FrameA.aspx页面里的input ***</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun>}</SPAN><SPAN class=pln> </SPAN><SPAN class=kwd>else</SPAN><SPAN class=pln> </SPAN><SPAN class=pun>{</SPAN><SPAN class=com>//Firefox</SPAN><SPAN class=pln><BR> childFrameDoc </SPAN><SPAN class=pun>=</SPAN><SPAN class=pln> frameA</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>contentDocument</SPAN><SPAN class=pun>;</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun>}</SPAN><SPAN class=pln><BR> alert</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>childFrameDoc</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>body</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>innerHTML</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln><br><br> </SPAN><SPAN class=kwd>var</SPAN><SPAN class=pln> childTxt </SPAN><SPAN class=pun>=</SPAN><SPAN class=pln> childFrameDoc</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>getElementById</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>"txtUserName"</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=kwd>var</SPAN><SPAN class=pln> childTxtByName </SPAN><SPAN class=pun>=</SPAN><SPAN class=pln> childFrameDoc</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>getElementsByName</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>"txtUserName"</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln><br><br> alert</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>childTxt </SPAN><SPAN class=pun>==</SPAN><SPAN class=pln> childTxtByName</SPAN><SPAN class=pun>[</SPAN><SPAN class=lit>0</SPAN><SPAN class=pun>]);</SPAN><SPAN class=pln> </SPAN><SPAN class=com>//true</SPAN><SPAN class=pln><BR> alert</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>childTxt</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>value</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln> </SPAN><SPAN class=com>//jeff wong</SPAN><SPAN class=pln><BR> alert</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>childTxtByName</SPAN><SPAN class=pun>[</SPAN><SPAN class=lit>0</SPAN><SPAN class=pun>].</SPAN><SPAN class=pln>value</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln> </SPAN><SPAN class=com>// jeff wong</SPAN><SPAN class=pln><br><br><BR> </SPAN><SPAN class=com>//取FrameB.aspx内的input文本</SPAN><SPAN class=pln><BR> childFrameDoc </SPAN><SPAN class=pun>=</SPAN><SPAN class=pln> </SPAN><SPAN class=kwd>undefined</SPAN><SPAN class=pun>;</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=kwd>if</SPAN><SPAN class=pln> </SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>document</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>all</SPAN><SPAN class=pun>)</SPAN><SPAN class=pln> </SPAN><SPAN class=pun>{</SPAN><SPAN class=com>//IE</SPAN><SPAN class=pln><BR> childFrameDoc </SPAN><SPAN class=pun>=</SPAN><SPAN class=pln> frameB</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>document</SPAN><SPAN class=pun>;</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun>}</SPAN><SPAN class=pln> </SPAN><SPAN class=kwd>else</SPAN><SPAN class=pln> </SPAN><SPAN class=pun>{</SPAN><SPAN class=com>//Firefox</SPAN><SPAN class=pln><BR> childFrameDoc </SPAN><SPAN class=pun>=</SPAN><SPAN class=pln> frameB</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>contentDocument</SPAN><SPAN class=pun>;</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun>}</SPAN><SPAN class=pln><BR> alert</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>childFrameDoc</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>body</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>innerHTML</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln><br><br> </SPAN><SPAN class=kwd>var</SPAN><SPAN class=pln> childTxt </SPAN><SPAN class=pun>=</SPAN><SPAN class=pln> childFrameDoc</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>getElementById</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>"txtUserNameB"</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=kwd>var</SPAN><SPAN class=pln> childTxtByName </SPAN><SPAN class=pun>=</SPAN><SPAN class=pln> childFrameDoc</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>getElementsByName</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>"txtUserNameB"</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln><br><br> alert</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>childTxt </SPAN><SPAN class=pun>==</SPAN><SPAN class=pln> childTxtByName</SPAN><SPAN class=pun>[</SPAN><SPAN class=lit>0</SPAN><SPAN class=pun>]);</SPAN><SPAN class=pln> </SPAN><SPAN class=com>//true</SPAN><SPAN class=pln><BR> alert</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>childTxt</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>value</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln> </SPAN><SPAN class=com>//jeffery zhao</SPAN><SPAN class=pln><BR> alert</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>childTxtByName</SPAN><SPAN class=pun>[</SPAN><SPAN class=lit>0</SPAN><SPAN class=pun>].</SPAN><SPAN class=pln>value</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln> </SPAN><SPAN class=com>// jeffery zhao</SPAN><SPAN class=pln><br><br> </SPAN><SPAN class=pun>}</SPAN></CODE> 小结：
a、通过iframe对象所在页面的对象模型（通过document.getElementById("iframeId")获取），你可以访问iframe对象的属性，但不能访问其内容。
b、frames集合提供了对iframe内容的访问（通过document.frames["iframeName"]获取）。通常情况下我们都使用frames集合读写iframe内包含的元素。
c、 如果只想改变iframe的src或者border, scrolling等attributes(与property不是一个概念,property是不能写在标签内的,比 如:scrollHeight,innerHTML等),就需要用到document.getElementById方法.
d、要想使用iframe内的函数或dom元素（比如想得到iframe的document.body的内容）,变量就必须通过frames集合.因为它取的是一个完整的DOM模型，而通过id获取的方法只是取出了一个object而已.
e、如果在iframe的页面未完全装载的时候,调用iframe的dom模型,会发生错误.
2、子页面操作父页面
这里以子页面FrameA.aspx举例。在子页面A中，我们通过函数getParent获取MainForm.aspx的dom元素，然后按照正常的dom元素操作就是了：
<CODE jQuery1255503204984="6"><SPAN class=pln> </SPAN><SPAN class=com>//子页面与父页面之间的操作 </SPAN><SPAN class=pln><BR> </SPAN><SPAN class=kwd>function</SPAN><SPAN class=pln> getParent</SPAN><SPAN class=pun>()</SPAN><SPAN class=pln> </SPAN><SPAN class=pun>{</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=kwd>if</SPAN><SPAN class=pln> </SPAN><SPAN class=pun>(</SPAN><SPAN class=kwd>self</SPAN><SPAN class=pln> </SPAN><SPAN class=pun>!=</SPAN><SPAN class=pln> top</SPAN><SPAN class=pun>)</SPAN><SPAN class=pln> </SPAN><SPAN class=pun>{</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=kwd>var</SPAN><SPAN class=pln> oDoc </SPAN><SPAN class=pun>=</SPAN><SPAN class=pln> top</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>parent</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>document</SPAN><SPAN class=pun>;</SPAN><SPAN class=pln><BR> alert</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>oDoc</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>body</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>innerHTML</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln> <BR> alert</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>oDoc</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>documentElement</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>innerHTML</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln> <BR> alert</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>oDoc</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>frames</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>length</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln> </SPAN><SPAN class=com>//返回结果：2 表明父页面有两个iframe</SPAN><SPAN class=pln><br><br> </SPAN><SPAN class=com>//操作父页面的文本框</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=kwd>var</SPAN><SPAN class=pln> oTxt </SPAN><SPAN class=pun>=</SPAN><SPAN class=pln> oDoc</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>getElementById</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>"txtParent"</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln><BR> alert</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>oTxt</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>value</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln><br><br> </SPAN><SPAN class=pun>}</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=kwd>else</SPAN><SPAN class=pln> alert</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>"不在框架中"</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun>}</SPAN></CODE>
3、子页面操作子页面
这个还要借助主页面间接获取另一个子页面。这里还以子页面A来举例。通过主页面，我们间接获取了子页面B，然后像正常操作dom一样，子页面A完成对子页面B的控制和操作。
先修改getAnotherChild()函数：
<CODE jQuery1255503204984="7"><SPAN class=pln> </SPAN><SPAN class=com>//当前子页面与另外一个子页面之间的操作</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=kwd>function</SPAN><SPAN class=pln> getAnotherChild</SPAN><SPAN class=pun>()</SPAN><SPAN class=pln> </SPAN><SPAN class=pun>{</SPAN><SPAN class=pln><BR> alert</SPAN><SPAN class=pun>(</SPAN><SPAN class=kwd>self</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>location</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>href</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln> </SPAN><SPAN class=com>//当前页面的url</SPAN><SPAN class=pln><br><br> </SPAN><SPAN class=com>//通过父页面，间接获取另外一个子页面</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=kwd>if</SPAN><SPAN class=pln> </SPAN><SPAN class=pun>(</SPAN><SPAN class=kwd>self</SPAN><SPAN class=pln> </SPAN><SPAN class=pun>!=</SPAN><SPAN class=pln> top</SPAN><SPAN class=pun>)</SPAN><SPAN class=pln> </SPAN><SPAN class=pun>{</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=kwd>var</SPAN><SPAN class=pln> oDoc </SPAN><SPAN class=pun>=</SPAN><SPAN class=pln> top</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>parent</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>document</SPAN><SPAN class=pun>;</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=kwd>var</SPAN><SPAN class=pln> oAnotherFrame </SPAN><SPAN class=pun>=</SPAN><SPAN class=pln> oDoc</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>frames</SPAN><SPAN class=pun>[</SPAN><SPAN class=str>"iframeB"</SPAN><SPAN class=pun>];</SPAN><SPAN class=pln> </SPAN><SPAN class=com>//返回另外一个iframe</SPAN><SPAN class=pln><br><br> alert</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>oAnotherFrame</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>location</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln><BR> alert</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>oAnotherFrame</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>document</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>body</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>innerHTML</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln><BR> alert</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>oAnotherFrame</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>document</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>documentElement</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>innerHTML</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln><br><br> </SPAN><SPAN class=kwd>var</SPAN><SPAN class=pln> oTxt </SPAN><SPAN class=pun>=</SPAN><SPAN class=pln> oAnotherFrame</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>document</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>getElementById</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>"txtUserNameB"</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln><BR> alert</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>oTxt</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>value</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln> </SPAN><SPAN class=com>//jeffery zhao</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun>}</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun>}</SPAN><SPAN class=pln><BR></SPAN></CODE>注意：修改完getAnotherChild()函数，然后将子页面A（FrameA.aspx）中的textUserName的onblur事件改为 onblur="getAnotherChild()"就可以看到结果了.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
