JS操作iframe里的dom實例解釋

　　直接賦值如下代碼測試即可明白：

　　1.html:

　　復(fù)制代碼 代碼如下:

　　====================注意:測試從這里開始=========================

　　用來測試子窗體iframeA訪問父窗體的某元素

　　====================iframe分割線=========================

　　====================iframe分割線=========================

　　先來演示:父窗體訪問子窗體中的某方法或元素

　　總結(jié):父窗體訪問子窗體的方法跟元素采用不同的方式

　　//子窗口訪問父窗口方法

　　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

　　復(fù)制代碼 代碼如下:

　　用來測試父窗體訪問子窗體中的某元素

　　用來測試子窗口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

　　復(fù)制代碼 代碼如下:

　　二:測試子窗體間相互訪問某方法或元素

　　//子窗體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()