ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript iframes_javascript スキルの相互運用性の簡単な分析
JavaScript iframes_javascript スキルの相互運用性の簡単な分析
- WBOYオリジナル
- 2016-05-16 18:44:391239ブラウズ
iframe 要素は、ドキュメント内のドキュメント、またはフローティング フレームのようなものです。 iframe の操作は常に難しい点であり、この点に関する記事はインターネット上に数多くあります。以下、私自身の経験をもとにメモを整理して記録していきます。
1. ページ
3 つのページ: 親ページと 2 つの子ページは、親ページの 2 つの 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 または border、scrolling およびその他の属性 (プロパティとは異なる概念) のみを変更したい場合は、scrollHeight、innerHTML などのプロパティをタグ内に記述することはできません。
d. iframe で関数または dom 要素を使用する場合 (たとえば、iframe の document.body のコンテンツを取得する場合)。 、変数はフレーム コレクションを介して渡される必要があります。これは、完全な DOM モデルを取得し、そのメソッドが iframe ページの呼び出し時にオブジェクトを取得するだけです。
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()" に変更して、結果を確認します。声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。