JavaScript frame - iframe Element

Frame簡介

框架頁(Frameset)目前使用的越來越少，多會建議使用CSS來實作畫面切割排列。不過<iframe>在影音網站還是很常見。

<frameset cols="value1,value2" rows="value3,value4">
    <frame name="1" src="1.html" scrolling="yes|no" />
    <frame name="2" src="2.html" scrolling="yes|no" />
    <frame name="3" src="3.html" scrolling="yes|no" />
    <frame name="4" src="4.html" scrolling="yes|no" />
</frameset> 

Frame屬性

1. cols屬性：定義左右分割frame尺寸
2. rows屬性：定義上下分割frame尺寸

以前面範例為例，先切左右，畫面從中間左右分割為兩塊(cols兩個value)，再切上下，再從中間橫切上下兩塊(rows兩個value)，所以畫面會被切成四塊，分別載入不同HTML文件。

frameset運作

name="1"的frame,載入1.html；name="2"的frame,載入2.html，以此類推，由左而右，由上而下。

frame屬性

JavaScript frame屬性

名稱	說明
src	要顯示的HTML文件
name	frame名稱
scrolling	是否有捲動軸，yes有

frames集合架構

圖一：Frames集合架構

frames屬性

JavaScript frames集合屬性

名稱	說明
self	傳回目前的window物件，相當於window屬性
parent	傳回目前frame的上一層物件(父物件)
top	如果是巢狀frame，top就是最上層的window物件，也因為巢狀frame，top不一定等於prent屬性

// 由後往前看，找frames[0]的上一層物件
parent.frames[0]; 
// 使用name來取得window物件，然後就可以進一步設定window物件屬性
parent.1.localtion.href = "1.html";

巢狀frame

1. 第一層frameset的frame可以擁有第二層的frameset
2. window和self屬性是指第二層frameset中目前<frame>
3. parent屬性是指第二層<frameset>，下一層是self屬性的frame
4. top屬性是最上層第一層<frameset>，下一層是parent屬性的第二層frameset

Frameset屬性

• cols屬性：定義左右分割frame尺寸
• rows屬性：定義上下分割frame尺寸

Frame屬性

JavaScript Frame屬性

名稱	說明
name/id	frame名稱
frameBorder	是否顯示frame邊框
src	載入的HTML文件
scrolling	是否擁有捲動軸
noResize	是否可以調整frame的尺寸
marginHeight	存取frame邊界的高
marginWidth	存取frame邊界的寬

iframe介紹

<iframe name="" src="" height="" width="" align=""></iframe>

JavaScript iframe屬性

名稱	說明
name/id	名稱
src	顯示圖檔、HTML文件、URL網址
height	高
width	寬
align	Iframe與網頁其他文字對齊方式

// 將Video.htm載入到id="if1"的iframe
document.getElementById("if1").src="Video.htm";