JS操作iframe里的dom(实例讲解)_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.backgroundColor="#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.backgroundColor="#f0a0f0"
}
//子窗口访问父窗口方法
function frameToPfun(ss){
parent.testP("ssss");
}
//用于测试iframeB访问的方法
function testBA(){
alert("用于测试iframeB访问的方法")
}

b.html
代码如下:

无标题文档

二:测试子窗体间相互访问某方法或元素

//子窗体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();
}

function getsFun(){
return "sssssss";
}
//getFun()

显示全文

全部频道

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