提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

JS操作iframe里的dom(实例讲解)

JS实例 操作 讲解 dom iframe
2023-06-13 09:15:17 时间

直接赋值如下代码测试即可明白：

1.html:

复制代码代码如下:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>无标题文档</title>
</head>

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


a.html
复制代码代码如下:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>无标题文档</title>
</head>

<body>
<divid="ooxx">用来测试父窗体访问子窗体中的某元素</div>
<pid="divooxx">用来测试子窗口B访问窗体A的某元素</p>
<p>1.子窗口iframeA访问父窗口的某元素</p>
<inputtype="button"onclick="frameToPdiv()"value="子窗口访问父窗口的某元素"/>
<inputtype="button"onclick="frameToPfun()"value="子窗口访问父窗口的某方法"/>
<scripttype="text/javascript">
   //子窗口访问父窗口的某元素
   functionframeToPdiv(){
       parent.document.getElementById("pox").style.color="#fff";
       parent.document.getElementById("pox").style.backgroundColor="#f0a0f0"
   }
   //子窗口访问父窗口方法
   functionframeToPfun(ss){
       parent.testP("ssss");
   }
   //用于测试iframeB访问的方法
   functiontestBA(){
       alert("用于测试iframeB访问的方法")
   }
</script>
</body>
</html>


b.html
复制代码代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>无标题文档</title>
</head>

<body>
<p>二:测试子窗体间相互访问某方法或元素</p>
<inputtype="button"value="子窗体B访问子窗体A的某元素"onclick="frameTframeDiv()"/>
<inputtype="button"value="子窗体B访问子窗体A的某方法"onclick="frameTframeFun()"/>
<scripttype="text/javascript">
   //子窗体B访问子窗体A的某元素
   functionframeTframeDiv(){
       //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的某方法
   functionframeTframeFun(){
           window.parent.frames["frameA"].testBA();
   }
</script>
<scripttype="text/javascript">
   functiongetsFun(){
       return"sssssss";
   }
   //getFun()
</script>
</body>
</html>

相关文章