JS操作iframe里的dom实例解释

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

JS操作iframe里的dom实例解释

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