JS操作iframe裡的dom的介紹

最後更新：2017-02-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本篇主要是對JS操作iframe裡的dom進行了介紹，需要的朋友可以過來參考下，希望對大家有所協助

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

1.html:

代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>無標題文檔</title>

</head>

<body>

<div class="line">====================注意:測試從這裡開始=========================</div>

<p id="pox">用來測試子表單iframeA訪問父表單的某元素</p>

<div class="line">====================iframe分割線=========================</div>

<div class="line">====================iframe分割線=========================</div>

<p>先來示範:父表單訪問子表單中的某方法或元素</p>

<p>總結:父表單訪問子表單的方法跟元素採用不同的方式</p>

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

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());

}

</script>

</body>

</html>

a.html

代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>無標題文檔</title>

</head>

<body>

<div id="ooxx">用來測試父表單訪問子表單中的某元素</div>

<p id="divooxx">用來測試子視窗B訪問表單A的某元素</p>

<p>1.子視窗iframeA訪問父視窗的某元素</p>

//子視窗訪問父視窗的某元素

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訪問的方法")

}

</script>

</body>

</html>

b.html

代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>無標題文檔</title>

</head>

<body>

<p>二:測試子表單間相互訪問某方法或元素</p>

//子表單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();

}

</script>

function getsFun(){

return "sssssss";

}

//getFun()

</script>

</body>

</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

JS操作iframe裡的dom的介紹

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support