標籤:
HTML iframe 和 frameset 的區別
iframe 和 frameset 都用於html頁面的架構布局。
目錄:
1. <iframe> 標籤:iframe 是個內聯架構,是在頁面裡產生個內部架構。
2. <frameset> 標籤:frameset 定義一個框架組,包含多個子架構,每個架構都有獨立的文檔。
1. <iframe> 標籤
iframe 是個內聯架構,是在頁面裡產生個內部架構。
1.1 格式
<iframe></iframe>
1.2 屬性
frameborder {int}:是否顯示架構的邊框;
src {URL}:指定一個資源(如網頁、圖片)的uri;
scrolling {boolean}:是否顯示架構的捲軸;
width {int}:定義iframe的寬度;
height {int}:定義iframe的高度;
1.3 樣本
<body><h3>HTML標籤示範</h3><iframe src=1.1-ShowHtml.htm ></iframe></body>
1.4 注意事項
在 "<iframe>我是內容</iframe>" 內新增內容時,在展示頁面不會顯示添加的內容。所以還是使用src屬性指定一個頁面吧。
1.5 應用情境
1) 版本升級頁面,版本日誌過多,可以把升級的資訊放到一個iframe裡。
2) 富文本編輯框,如部落格園的【建立隨筆】地區。
2. <frameset> 標籤
frameset 定義一個框架組,包含多個架構,每個架構都有獨立的文檔。
2.1 格式
<frameset >
<frame src=a.htm />
<frame src=b.htm />
<noframes></noframes>
</frameset>
2.2 子項說明
<frame src=a.htm /> :子架構
<noframes></noframes>:瀏覽器不支援此架構的時,顯示的內容。
2.3 屬性frameset 屬性:
rows :表示子架構按行的樣式布局()。以2個子架構為例:rows="30%,*" ,表示第一個架構占整個頁面30%的高度,第二個占剩下的;
cols :表示子架構按列的樣式布局()。以2個子架構為例:cols="30%,*" ,表示第一個架構占整個頁面30%的長度,第二個占剩下的;
noresize="noresize" :表示不調整子架構的範圍。
frame 屬性:
src :指向一個資源(如頁面、圖片等)的URI;
name :指定架構的名稱,以便進行架構間的操作。
2.4 樣本
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>frameset 示範</title></head><frameset rows="30%,*" noresize="noresize"> <frame src=DateGrid.htm name="frm1" /> <frame src=Dialog.htm name="frm2"/> <noframes></noframes></frameset></html>
2.5 注意事項
使用frameset標籤時,注意要去掉外層的<body></body>標籤。
2.6 子架構間的操作
參照範例程式碼,frm1更改frm2的子集指向的頁面:window.parent.frames["frm2"].location.href = ‘b.htm‘
2.7 應用情境
1) 後台頁面的管理,左邊顯示 菜單,右邊架構 顯示詳細頁面。
2) 功能菜單頁面,如bbs.csdn.net
3. 小知識
瀏覽頁面中的架構時,在架構頁面內 點擊右鍵,會多出架構的資訊。
以chrome為例:
HTML iframe 和 frameset 的區別