js操作iframe的那点事

js操作iframe的那点事

现在工作上基本很少去涉及iframe的相关操作,这些自己做个demo来记录学习:看得我有点绕而且晕.

这次要谈到的问题涉及以下三个点:(在同域状态下)

1.父窗体访问子窗体中的某方法或某个元素

2.子窗体访问父窗体中的某方法或某个元素

3.子窗体访问相邻窗体中的方法或某个元素

注意点:在本地直接用IE和FF打开测试正常，但用Chrome直接打开测试无效.原来Chrome不允许采用file:协议引用父窗口，放到Web容器中测试就正常了。

这是父窗体的代码:

总结:父窗体访问子窗体的方法跟元素采用不同的方式

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<div class="line">====================注意:测试从这里开始=========================</div> <p id="pox">用来测试子窗体iframeA访问父窗体的某元素</p> <div class="line">====================iframe分割线=========================</div> <iframe src="iframeA.html" width="100%" frameborder="0" id="frameA" name="frameA"></iframe> <iframe src="iframeB.html" name="iframeB" width="100%" frameborder="0" id="frameB"></iframe> <div class="line">====================iframe分割线=========================</div> <p>先来演示:父窗体访问子窗体中的某方法或元素</p> <p>总结:父窗体访问子窗体的方法跟元素采用不同的方式</p> <input type="button" onclick="frameDiv()" value="父窗体访问子窗体中的某元素" /> <input type="button" onclick="frameFun()" value="父窗体访问子窗体中的某方法" /> <script type="text/javascript">     //子窗口访问父窗口方法     function testP(){         alert("子窗口A访问父窗口的方法")     }     //取得iframe的元素     function getIframe(id){         return document.getElementById(id).contentWindow.document;     }     //父窗口访问子窗口元素     function frameDiv(){         getIframe("frameA").getElementById("ooxx").style.backgroundColor="#f00"         //window.frames["iframeA"].getElementById("ooxx").style.backgroundColor="#f00"  //不能通过这种形式访问某元素     }     //父窗口访问子窗口方法     function frameFun(){         //getIframe("frameB").getsFun();//不能通过这种形式访问子窗体某方法         window.frames["iframeB"].getsFun()     } </script>

这是子窗体iframeA的代码:

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20

<div id="ooxx">用来测试父窗体访问子窗体中的某元素</div> <p id="divooxx">用来测试子窗口B访问窗体A的某元素</p> <p>1.子窗口iframeA访问父窗口的某元素</p> <input type="button" onclick="frameToPdiv()" value="子窗口访问父窗口的某元素" /> <input type="button" onclick="frameToPfun()" value="子窗口访问父窗口的某方法" /> <script type="text/javascript">     //子窗口访问父窗口的某元素     function frameToPdiv(){         parent.document.getElementById("pox").style.color="#fff";         parent.document.getElementById("pox").style.backgroundColor="#f0a0f0"     }     //子窗口访问父窗口方法     function frameToPfun(){         parent.testP();     }     //用于测试iframeB访问的方法     function testBA(){         alert("用于测试iframeB访问的方法")     } </script>

这是子窗体B的代码：

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<p>二:测试子窗体间相互访问某方法或元素</p> <input type="button" value="子窗体B访问子窗体A的某元素" onclick="frameTframeDiv()" /> <input type="button" value="子窗体B访问子窗体A的某方法" onclick="frameTframeFun()" /> <script type="text/javascript">     //子窗体B访问子窗体A的某元素     function frameTframeDiv(){         //parent.document.getElementById("frameA").contentWindow.document.getElementById("divooxx").style.color="#a0c0f0";         //parent.document.getElementById("frameA").contentWindow.document.getElementById("divooxx").style.backgroundColor="#000"         var _bframe=parent.getIframe("frameA");//子窗体访问父窗体方法         _bframe.getElementById("divooxx").style.color="#a0c0f0";         _bframe.getElementById("divooxx").style.backgroundColor="#000";     }     //子窗体B访问子窗体A的某方法     function frameTframeFun(){             window.parent.frames["frameA"].testBA();     } </script> <script type="text/javascript">     function getsFun(){         alert("父窗体访问Bframe子窗体的方法")     }     //getFun() </script>

好了，代码就那样，重点要了: