JavaScript iframe的相互操作浅析_javascript技巧

iframe元素也就是文档中的文档，或者好像浮动的框架(frame)。关于iframe的操作一直是一个疑难点，网上有很多这方面的文章介绍。下面我结合自己的经验，整理一下笔记记录下来。
一、页面
三个页面：父页面和两个子页面，两个子页面在父页面的两个iframe里。
1、父页面MainForm.aspx

<code jquery1255503204984="2"><span class="pun"><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"><span class="pln"><br></span><span class="pun"><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 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 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 class="tag">body</span><span class="pun">></span><span class="pln"><br>    </span><span class="pun"><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 class="tag">div</span><span class="pun">></span><span class="pln"><br>        </span><span class="pun"><span class="tag">ul</span><span class="pun">></span><span class="pln"><br>            </span><span class="pun"><span class="tag">li</span><span class="pun">></span><span class="pln"><br>                父页面（文本失去焦点可看结果）：</span><span class="pun"><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 class="tag">li</span><span class="pun">></span><span class="pln"><br>                </span><span class="pun"><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 class="tag">li</span><span class="pun">></span><span class="pln"><br>                </span><span class="pun"><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 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></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

2、子页面A

<code jquery1255503204984="3"><span class="pun"><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"><span class="pln"><br></span><span class="pun"><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 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 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 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 class="tag">body</span><span class="pun">></span><span class="pln"><br>    </span><span class="pun"><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 class="tag">div</span><span class="pun">></span><span class="pln"><br>         子页面1（文本失去焦点可看结果）：</span><span class="pun"><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></span></span></span></span></span></span></span></span></span></span></code>

3、子页面B

<code jquery1255503204984="4"><span class="pun"><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"><span class="pln"><br><br></span><span class="pun"><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 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 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 class="tag">body</span><span class="pun">></span><span class="pln"><br>    </span><span class="pun"><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 class="tag">div</span><span class="pun">></span><span class="pln"><br>        子页面2（文本失去焦点可看结果）：</span><span class="pun"><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></span></span></span></span></span></span></span></span></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()"就可以看到结果了.