1.父窗体访问子窗体中的某方法或某个元素
2.子窗体访问父窗体中的某方法或某个元素
3.子窗体访问相邻窗体中的方法或某个元素
注意点:在本地直接用IE和FF打开测试正常,但用Chrome直接打开测试无效.原来Chrome不允许采用file:协议引用父窗口,放到Web容器中测试就正常了。
这是父窗体的代码:
总结:父窗体访问子窗体的方法跟元素采用不同的方式
- <div class="line">====================注意:测试从这里开始=========================</div>
- <p id="pox">用来测试子窗体iframeA访问父窗体的某元素</p>
- <div class="line">====================iframe分割线=========================</div>
- <iframe src="iframeA.html" mce_src="iframeA.html" width="100%" frameborder="0" id="frameA" name="frameA"></iframe>
- <iframe src="iframeB.html" mce_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="父窗体访问子窗体中的某方法" />
- <mce: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()
- }
- // --></mce:script>
这是子窗体iframeA的代码:
- <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="子窗口访问父窗口的某方法" />
- <mce: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访问的方法")
- }
- // --></mce:script>
这是子窗体B的代码:
- <p>二:测试子窗体间相互访问某方法或元素</p>
- <input type="button" value="子窗体B访问子窗体A的某元素" onclick="frameTframeDiv()" />
- <input type="button" value="子窗体B访问子窗体A的某方法" onclick="frameTframeFun()" />
- <mce: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();
- }
- // --></mce:script>
- <mce:script type="text/javascript"><!--
- function getsFun(){
- alert("父窗体访问Bframe子窗体的方法")
- }
- //getFun()
- // --></mce:script>