HTML iframe 和 frameset 的區別

來源:互聯網
上載者:User

標籤:

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 的區別

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: 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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.