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文件
nameframe名稱
scrolling是否有捲動軸,yes有

frames集合架構

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/idframe名稱
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
alignIframe與網頁其他文字對齊方式

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

沒有留言:

張貼留言

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。