溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹Javascript中怎么對(duì)iframe進(jìn)行操作，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。
為了更好的講解和演示，我們準(zhǔn)備3個(gè)頁(yè)面，父級(jí)頁(yè)面index.html的html結(jié)構(gòu)如下。另外兩個(gè)子頁(yè)面分別為iframeA.html和iframeB.html。我們需要演示通過(guò)父頁(yè)面獲取和設(shè)置子頁(yè)面iframeA.html中元素的值，以及演示通過(guò)子頁(yè)面iframeB.html設(shè)置子頁(yè)面iframeA.html相關(guān)元素的值以及操作父頁(yè)面index.html元素。
<p class="opt_btn">
<button onclick="getValiframeA();">父窗口獲取iframeA中的值</button>
<button onclick="setValiframeA();">父窗口設(shè)置iframeA中的值</button>
<button onclick="setBgiframeA();">父窗口設(shè)置iframeA的h2標(biāo)簽背景色</button>
</p>
<p id="result">--操作結(jié)果--</p>
<p class="frames">
<iframe id="wIframeA" name="myiframeA" src="iframeA.html" scrolling="no" frameborder="1"></iframe>
<iframe id="wIframeB" name="myiframeB" src="iframeB.html" scrolling="no" frameborder="1"></iframe>
</p>
iframeA.html布置一個(gè)h2標(biāo)題，以及一個(gè)輸入框和一個(gè)p段落，結(jié)構(gòu)如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>xuebuyuan.com</title>
</head>
<body>
<h2 id="title">iframe A</h2>
<input type="text" id="iframeA_ipt" name="iframeA_ipt" value="123">
<p id="hello">xuebuyuan.com歡迎您！</p>
</body>
</html>
iframeB.html同樣布置h2標(biāo)題和段落以及輸入框。iframe有兩個(gè)按鈕，調(diào)用了javascript，相關(guān)代碼等下在js部分會(huì)描述。
<html>
<head>
<meta charset="utf-8">
<title>xuebuyuan.com</title>
</head>
<body>
<h2>iframe B</h2>
<p id="hello">Helloweb.com</p>
<input type="text" id="iframeB_ipt" name="iframeB_ipt" value="1,2,3,4">
<button onclick="child4parent();">iframeB子窗口操作父窗口</button>
<button onclick="child4child();">iframeB操作子窗口iframeA</button>
</body>
</html>
頁(yè)面html都布置好了，現(xiàn)在我們來(lái)看Javascript部分。
首先我們來(lái)看index.html父級(jí)頁(yè)面的操作。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)前頁(yè)面獲取元素的操作一樣了。
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中輸入框里的值：<span style='color:#f30'>"+valA+"</span>";
}
function setValiframeA(){
getIFrameDOM("wIframeA").getElementById('iframeA_ipt').value = 'Helloweba';
document.getElementById("result").innerHTML = "設(shè)置了了子窗口iframeA中輸入框里的值：<span style='color:#f30'>Helloweba</span>";
}
function setBgiframeA(){
getIFrameDOM("wIframeA").getElementById('title').style.background = "#ffc";
}
保存后，打開(kāi)index.html看下效果，是不是操作很簡(jiǎn)單了。
好，iframeB.html的兩個(gè)按鈕操作調(diào)用了js，代碼如下：
function child4child(){
var parentDOM=parent.getIFrameDOM("wIframeA");
parentDOM.getElementById('hello').innerHTML="<span style='color:blue;font-size:18px;background:yellow;'>看到輸入框里的值變化了嗎？</span>";
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="<p style='background:#000;color:#fff;font-size:15px;'>子窗口傳來(lái)輸入框值：<span style='color:#f30'>"+iframeB_ipt+"</span></p>";
}
子頁(yè)面iframeB.html可以通過(guò)使用parent.getIFrameDOM()調(diào)用了負(fù)頁(yè)面的自定義函數(shù)getIFrameDOM()，從而就可以對(duì)平級(jí)的子頁(yè)面iframeA.html進(jìn)行操作，子頁(yè)面還可以通過(guò)使用parent.document操作父級(jí)頁(yè)面元素。
關(guān)于Javascript中怎么對(duì)iframe進(jìn)行操作就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
