源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2021-08-28 22:13 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:JS操作iframe里的dom(实例讲解)
直接赋值如下代码测试即可明白: [b]1.html: [/b]
[u]复制代码[/u] 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> <div class="line">====================注意:测试从这里开始=========================</div> <p id="pox">用来测试子窗体iframeA访问父窗体的某元素</p> <div class="line">====================iframe分割线=========================</div> <iframe src="a.html" width="100%" frameborder="0" id="frameA" name="frameA"></iframe> <iframe src="b.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(ss){         alert(ss)     }     //取得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();   alert(window.frames["iframeB"].getsFun());     } </script> </body> </html>
[b]a.html [/b]
[u]复制代码[/u] 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> <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(ss){         parent.testP("ssss");     }     //用于测试iframeB访问的方法     function testBA(){         alert("用于测试iframeB访问的方法")     } </script> </body> </html>
[b]b.html [/b]
[u]复制代码[/u] 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> <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(){         return "sssssss";     }     //getFun() </script> </body> </html>
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部