js操作iframe

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

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

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

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

这是父窗体的代码:

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

 

 

[xhtml]  view plain copy

1. <div class="line">====================注意:测试从这里开始=========================</div>  
2. <p id="pox">用来测试子窗体iframeA访问父窗体的某元素</p>  
3. <div class="line">====================iframe分割线=========================</div>  
4. <iframe src="iframeA.html" mce_src="iframeA.html" width="100%" frameborder="0" id="frameA" name="frameA"></iframe>  
5. <iframe src="iframeB.html" mce_src="iframeB.html" name="iframeB" width="100%" frameborder="0" id="frameB"></iframe>  
6. <div class="line">====================iframe分割线=========================</div>  
7. <p>先来演示:父窗体访问子窗体中的某方法或元素</p>  
8. <p>总结:父窗体访问子窗体的方法跟元素采用不同的方式</p>  
9. <input type="button" onclick="frameDiv()" value="父窗体访问子窗体中的某元素" />  
10. <input type="button" onclick="frameFun()" value="父窗体访问子窗体中的某方法" />  
11. <mce:script type="text/javascript"><!--  
12.         //子窗口访问父窗口方法  
13.         function testP(){  
14.                 alert("子窗口A访问父窗口的方法")  
15.         }  
16.         //取得iframe的元素  
17.         function getIframe(id){  
18.                 return document.getElementById(id).contentWindow.document;  
19.         }  
20.         //父窗口访问子窗口元素  
21.         function frameDiv(){  
22.                 getIframe("frameA").getElementById("ooxx").style.backgroundColor="#f00"  
23.                 //window.frames["iframeA"].getElementById("ooxx").style.backgroundColor="#f00"  //不能通过这种形式访问某元素  
24.         }  
25.         //父窗口访问子窗口方法  
26.         function frameFun(){  
27.                 //getIframe("frameB").getsFun();//不能通过这种形式访问子窗体某方法  
28.                 window.frames["iframeB"].getsFun()  
29.         }  
30. // --></mce:script>  

 

 

这是子窗体iframeA的代码:

[xhtml]  view plain copy

1. <div id="ooxx">用来测试父窗体访问子窗体中的某元素</div>  
2. <p id="divooxx">用来测试子窗口B访问窗体A的某元素</p>  
3. <p>1.子窗口iframeA访问父窗口的某元素</p>  
4. <input type="button" onclick="frameToPdiv()" value="子窗口访问父窗口的某元素" />  
5. <input type="button" onclick="frameToPfun()" value="子窗口访问父窗口的某方法" />  
6. <mce:script type="text/javascript"><!--  
7.         //子窗口访问父窗口的某元素  
8.         function frameToPdiv(){  
9.                 parent.document.getElementById("pox").style.color="#fff";  
10.                 parent.document.getElementById("pox").style.backgroundColor="#f0a0f0"  
11.         }  
12.         //子窗口访问父窗口方法  
13.         function frameToPfun(){  
14.                 parent.testP();  
15.         }  
16.         //用于测试iframeB访问的方法  
17.         function testBA(){  
18.                 alert("用于测试iframeB访问的方法")  
19.         }  
20. // --></mce:script>  

 

 

这是子窗体B的代码：

 
 

  
  

   
   

    
    [xhtml] 
    
    view plain
    
    copy
    
    

     
     
    
    
   
   
  
  
  
  
<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>