這篇文章給大家介紹Javascript中怎么對(duì)iframe進(jìn)行操作，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。
為了更好的講解和演示，我們準(zhǔn)備3個(gè)頁面，父級(jí)頁面index.html的html結(jié)構(gòu)如下。另外兩個(gè)子頁面分別為iframeA.html和iframeB.html。我們需要演示通過父頁面獲取和設(shè)置子頁面iframeA.html中元素的值，以及演示通過子頁面iframeB.html設(shè)置子頁面iframeA.html相關(guān)元素的值以及操作父頁面index.html元素。
--操作結(jié)果--
iframeA.html布置一個(gè)h2標(biāo)題，以及一個(gè)輸入框和一個(gè)p段落，結(jié)構(gòu)如下：
xuebuyuan.com歡迎您！
iframe A
iframeB.html同樣布置h2標(biāo)題和段落以及輸入框。iframe有兩個(gè)按鈕，調(diào)用了javascript，相關(guān)代碼等下在js部分會(huì)描述。
Helloweb.com
iframe B
頁面html都布置好了，現(xiàn)在我們來看Javascript部分。
首先我們來看index.html父級(jí)頁面的操作。JS操作iframe里的dom可是使用contentWindow屬性，contentWindow屬性是指指定的frame或者iframe所在的window對(duì)象，在IE中iframe或者frame的contentWindow屬性可以省略，但在Firefox中如果要對(duì)iframe對(duì)象進(jìn)行編輯則，必須指定contentWindow屬性，contentWindow屬性支持所有主流瀏覽器。
我們自定義了函數(shù)getIFrameDOM()，傳入?yún)?shù)iID即可獲取iframe，之后就跟在當(dāng)前頁面獲取元素的操作一樣了。
function getIFrameDOM(iID){
return document.getElementById(iID).contentWindow.document;
}
index.html的三個(gè)按鈕操作代碼如下：
function getValiframeA(){
var valA = getIFrameDOM("wIframeA").getElementById('iframeA_ipt').value;
document.getElementById("result").innerHTML = "獲取了子窗口iframeA中輸入框里的值："+valA+"";
}
function setValiframeA(){
getIFrameDOM("wIframeA").getElementById('iframeA_ipt').value = 'Helloweba';
document.getElementById("result").innerHTML = "設(shè)置了了子窗口iframeA中輸入框里的值：Helloweba";
}
function setBgiframeA(){
getIFrameDOM("wIframeA").getElementById('title').style.background = "#ffc";
}
保存后，打開index.html看下效果，是不是操作很簡單了。
好，iframeB.html的兩個(gè)按鈕操作調(diào)用了js，代碼如下：
子窗口傳來輸入框值："+iframeB_ipt+"function child4child(){
var parentDOM=parent.getIFrameDOM("wIframeA");
parentDOM.getElementById('hello').innerHTML="看到輸入框里的值變化了嗎？";
parentDOM.getElementById('iframeA_ipt').value = document.getElementById("iframeB_ipt").value;
parent.document.getElementById("result").innerHTML="子窗口iframeB操作了子窗口iframeA";
}
function child4parent(){
var iframeB_ipt = document.getElementById("iframeB_ipt").value;
parent.document.getElementById("result").innerHTML="
子頁面iframeB.html可以通過使用parent.getIFrameDOM()調(diào)用了負(fù)頁面的自定義函數(shù)getIFrameDOM()，從而就可以對(duì)平級(jí)的子頁面iframeA.html進(jìn)行操作，子頁面還可以通過使用parent.document操作父級(jí)頁面元素。
關(guān)于Javascript中怎么對(duì)iframe進(jìn)行操作就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
重慶分公司
重慶分公司
