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()
【JS操作iframe里的dom实例解释】相关文章：