Frameset、Frame、Iframe詳解之三：Javascript操作Frameset_

Frameset、Frame、Iframe詳解之三：Javascript操作Frameset__Java

最後更新：2018-07-20 來源：互聯網

上載者：User

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

Window 屬性	說明
frames[]	存放當前視窗中所有frame對象的數組。
length	視窗 frame 的數目，和 window.frames.length 等同。
name	當前視窗的名字，自 JavaScript 1.1 起，這個值是可讀寫的。
parent	對父視窗的引用。
self	對視窗自身的引用。
top	對最進階別視窗的引用，這個值通常和parent一致，除非 frame 中有更多的 frame。
window	另外一個對當前視窗的引用。

Parent.html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>FrameSet Test</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> </head> <frameset rows="33%,*,33%"> <frame src="framerelationship.html" name="frame1" id="frame1" /> <frame src="moreframes.html" name="frame2" id="frame2" /> <frame src="framerelationship.html" name="frame5" id="frame5" /> </frameset> </html>

parent.html文檔主體可以看作是三個 frame ,frame2, frame5 的 parent 。

1.在父視窗取得 frame 數目：

window.frames.length

2.在子視窗擷取frame的數目：

window.parent.frames.length //或 parent.frames.length

parent 表示一個表單的父表單，也可以用 top 來表示最進階別的表單，這樣可以寫成 top.frames.length ，但是需要注意的是：除非你有嵌套 frame ，否則 parent 和 top 通常表示的是一個對象。

3.訪問IFrame中的視窗 訪問一個 frame ，可以用 name 或者下標的方式查詢 frames 數組，parent.frames[0].name 將會輸出第一個 frame 的名字，在我們的例子中就是 frame1，同樣，我們也可以用 parent.frame1 或者 parent.frames["frame1"] 來實現相同的操作，記住，一個 frame 就是一個 window，知道這個，就可以使用所有Window 和 Document 的方法。

當理解了 frame 之間的關係，可以很容易的通過 parent.frames[] 操作任何 frame ，假如你有一個簡單的架構頁面：

//在任何一個frame中使用下列代碼可得到frame2 var varframe2 = parent.frames[1]; // 或者使用名稱

4.控制這些 iframe

iframe 是一個需要注意的 frame 變種，用iframe可以讓你不使用架構，但是卻可以嵌入頁面.事實上，我們也可以用 frames[] 的方法，此外，如果你的 iframe 有命名，可以通過 getElementById 來操控，樣本如下： <iframe src="http://www.google.com" name="iframe1" id="iframe1" height="200" width="200"></iframe> <form action="" method="get"> <input type="button" value="Load by Frames Array" onclick="frames['iframe1'].location='http://www.javascriptref.com';" /> <input type="button" value="Load by DOM" onclick="document.getElementById('iframe1').src='http://www.pint.com';" /> </form>

通過在連結標籤裡面加上 target 來將操作指向目標 frame ： <a href="http://www.google.com" target="framename">Google</a>

5.多表單的不同元素的訪問 a.使用索引號：parent.frames[Index1].docuement.forms[index2]
b.使用架構名和ID：parent.framesName.document.getElementById()

theFather.html <html> <head> <title>frame get Value test</title> </head> <iframe frameborder="1" height="78" marginheight="0" marginwidth="0" scrolling="no" width="100%" src="theSon.html"></iframe> <h3>這是theFather的文字框

本文章原先以中文撰寫並發佈於 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