溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹Javascript中怎么對iframe進行操作，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
為了更好的講解和演示，我們準備3個頁面，父級頁面index.html的html結構如下。另外兩個子頁面分別為iframeA.html和iframeB.html。我們需要演示通過父頁面獲取和設置子頁面iframeA.html中元素的值，以及演示通過子頁面iframeB.html設置子頁面iframeA.html相關元素的值以及操作父頁面index.html元素。
<p class="opt_btn">
<button onclick="getValiframeA();">父窗口獲取iframeA中的值</button>
<button onclick="setValiframeA();">父窗口設置iframeA中的值</button>
<button onclick="setBgiframeA();">父窗口設置iframeA的h2標簽背景色</button>
</p>
<p id="result">--操作結果--</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布置一個h2標題，以及一個輸入框和一個p段落，結構如下：
<!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標題和段落以及輸入框。iframe有兩個按鈕，調用了javascript，相關代碼等下在js部分會描述。
<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>
頁面html都布置好了，現在我們來看Javascript部分。
首先我們來看index.html父級頁面的操作。JS操作iframe里的dom可是使用contentWindow屬性，contentWindow屬性是指指定的frame或者iframe所在的window對象，在IE中iframe或者frame的contentWindow屬性可以省略，但在Firefox中如果要對iframe對象進行編輯則，必須指定contentWindow屬性，contentWindow屬性支持所有主流瀏覽器。
我們自定義了函數getIFrameDOM()，傳入參數iID即可獲取iframe，之后就跟在當前頁面獲取元素的操作一樣了。
function getIFrameDOM(iID){
return document.getElementById(iID).contentWindow.document;
}
index.html的三個按鈕操作代碼如下：
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 = "設置了了子窗口iframeA中輸入框里的值：<span style='color:#f30'>Helloweba</span>";
}
function setBgiframeA(){
getIFrameDOM("wIframeA").getElementById('title').style.background = "#ffc";
}
保存后，打開index.html看下效果，是不是操作很簡單了。
好，iframeB.html的兩個按鈕操作調用了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;'>子窗口傳來輸入框值：<span style='color:#f30'>"+iframeB_ipt+"</span></p>";
}
子頁面iframeB.html可以通過使用parent.getIFrameDOM()調用了負頁面的自定義函數getIFrameDOM()，從而就可以對平級的子頁面iframeA.html進行操作，子頁面還可以通過使用parent.document操作父級頁面元素。
關于Javascript中怎么對iframe進行操作就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
