JS操作iframe里的dom,js iframe

最新推荐文章于 2022-04-19 20:39:19 发布

原创最新推荐文章于 2022-04-19 20:39:19 发布 · 198 阅读

0 ·

CC 4.0 BY-SA版权

技术杂绘专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了如何在网页中实现不同窗体间的交互操作，包括父窗体与子窗体（如iframe）之间的方法调用及元素访问，并提供了具体的JavaScript代码示例。

　　直接赋值如下代码测试即可明白：
　　1.html:
　　
　　
　　
　　
　　无标题文档
　　
　　
　　====================注意:测试从这里开始=========================
　　用来测试子窗体iframeA访问父窗体的某元素
　　====================iframe分割线=========================
　　
　　
　　====================iframe分割线=========================
　　先来演示:父窗体访问子窗体中的某方法或元素
　　总结:父窗体访问子窗体的方法跟元素采用不同的方式
　　
　　
　　
　　//子窗口访问父窗口方法
　　function testP(ss){
　　alert(ss)
　　}
　　//取得iframe的元素
　　function getIframe(id){
　　return document.getElementById(id).contentWindow.document ;
　　}
　　//父窗口访问子窗口元素
　　function frameDiv(){
　　getIframe("frameA").getElementById("ooxx").style.b ackgroundColor="#f00"
　　//window.frames["iframeA"].getElementById("ooxx"). style.backgroundColor="#f00" //不能通过这种形式访问某元素
　　}
　　//父窗口访问子窗口方法
　　function frameFun(){
　　//getIframe("frameB").getsFun();//不能通过这种形式访问子窗体某方法
　　// window.frames["iframeB"].getsFun();
　　alert(window.frames["iframeB"].getsFun());
　　}
　　
　　
　　
　　a.html
　　
　　
　　
　　
　　无标题文档
　　
　　
　　用来测试父窗体访问子窗体中的某元素
　　用来测试子窗口B访问窗体A的某元素
　　1.子窗口iframeA访问父窗口的某元素
　　
　　
　　
　　//子窗口访问父窗口的某元素
　　function frameToPdiv(){
　　parent.document.getElementById("pox").style.color= "#fff";
　　parent.document.getElementById("pox").style.backgr oundColor="#f0a0f0"
　　}
　　//子窗口访问父窗口方法
　　function frameToPfun(ss){
　　parent.testP("ssss");
　　}
　　//用于测试iframeB访问的方法
　　function testBA(){
　　alert("用于测试iframeB访问的方法")
　　}
　　
　　
　　
　　b.html
　　
　　
　　
　　
　　无标题文档
　　
　　
　　二:测试子窗体间相互访问某方法或元素
　　
　　
　　
　　//子窗体B访问子窗体A的某元素
　　function frameTframeDiv(){
　　//parent.document.getElementById("frameA").content Window.document.getElementById("divooxx").style.col or="#a0c0f0";
　　//parent.document.getElementById("frameA").content Window.document.getElementById("divooxx").style.bac kgroundColor="#000"
　　var _bframe=parent.getIframe("frameA");//子窗体访问父窗体方法
　　_bframe.getElementById("divooxx").style.color="#a0 c0f0";
　　_bframe.getElementById("divooxx").style.background Color="#000";
　　}
　　//子窗体B访问子窗体A的某方法
　　function frameTframeFun(){
　　window.parent.frames["frameA"].testBA();
　　}
　　
　　
　　function getsFun(){
　　return "sssssss";
　　}
　　//getFun()
　　
　　
　　