JavaScript iframes_javascript 기술의 상호 운용성에 대한 간략한 분석-JS 튜토리얼-php.cn

iframe 요소는 문서 내의 문서이거나 부동 프레임과 같습니다. iframe의 운영은 늘 어려운 점이었고, 인터넷에는 이 부분에 대한 글이 많이 있습니다. 아래에서는 내 경험을 바탕으로 메모를 정리하고 기록하겠습니다.
1. 페이지
세 페이지: 상위 페이지와 두 개의 하위 페이지가 상위 페이지의 두 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>

로그인 후 복사

2. 작업
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. 프레임 컬렉션은 iframe 콘텐츠(document.frames["iframeName"]를 통해 획득)에 대한 액세스를 제공합니다. 일반적으로 프레임 컬렉션을 사용하여 iframe에 포함된 요소를 읽고 씁니다.
c. iframe의 src 또는 테두리, 스크롤 및 기타 속성(속성과 동일한 개념이 아님)만 변경하려는 경우 속성은 scrollHeight, innerHTML 등과 같은 태그에 쓸 수 없습니다. ), document.getElementById 메소드를 사용해야 합니다.
d. iframe에서 함수 또는 dom 요소를 사용하려는 경우(예: iframe의 document.body 내용을 가져오려는 경우) , 변수는 프레임 컬렉션을 통해 전달되어야 합니다. 완전한 DOM 모델을 가져와서 id를 통해 가져오기 때문입니다.
e. 완전히 로드되지 않으면 오류가 발생합니다.

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를 간접적으로 얻은 다음 하위 페이지 A는 일반적인 DOM 작업과 마찬가지로 하위 페이지 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()"로 변경하여 결과를 확인하세요.