本文轉載自:點擊打開鏈接
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. 小知識
瀏覽頁面中的框架時,在框架頁面內 點擊右鍵,會多出框架的信息。