frame 的最主要功能是用來把一個頁面劃分成好幾個小窗口頁面，每個小窗口可以顯示不同html文件，這樣頁面也可以稱為框架結構頁面，每個月小窗口稱作框架窗口，下來將詳細介紹框架窗口。

frame 在現在已經很少使用，雖然不是必須學習的，但還是建議了解學習下frame 、iframe的知識，在某些時候非常有用。

什麼是 frame 框架

如果想將頁面分成上下兩部分，各自互相獨立又互相關聯，用戶在其中一個部分操作頁面不影響其它部分的頁面，這樣的頁面也叫多窗口頁面。

1、框架窗口基本結構：

框架窗口主要包含2部分，一個是框架集，一個是具體的框架文件。

框架集就是存放框架結構的文件，也是訪問框架文件的入口，如果網頁由上下2個框架窗口組成，那麼除了這2個窗口的html文件，還有一個總的框架集文件。

框架文件是每個顯示區域對應的html文件，如下示例：

index.html

<html>
<head>
  <title>框架頁面</title>
</head>
<body>
  <frameset>
  <frame src="top.html"></frame>
   <frame src="bottom.html"></frame>
  </frameset>
  </body>
</html>

如上index.html 就是框架集文件，在這個框架集文件中定義了頁面劃分成上下2部分，分別對應top.html 和 bottom.html 2個框架窗口文件。

2、框架窗口分割

框架頁面分割方式是在框架集frameset通過rows 或 cols 屬性定義的，一般按分割類型分為以下幾種：

水平分割窗口
垂直分割窗口
嵌套分割窗口

2.1 水平分割窗口

將頁面按水平方向分割，也就是上下結構，語法：

<frameset rows="窗口1高度，窗口2高度，">
  <frame src="top.html"></frame>
   <frame src="bottom.html"></frame>
  </frameset>

在該語法中，rows 可以設置多個值，每個值對應一個框架窗口垂直高度，它的值可以使用像素單位或百分比單位。

如下示例：

<html>
<frameset rows="25%,50%,25%">
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">
</frameset>
</html>

顯示效果：

比如上面這個，被從上到下分割成3個窗口，高度依次是25%,50%,25%。

2.2 垂直分割窗口

沿著頁面垂直方向分割，也就是左右結構的多窗口頁面。語法如下：

<frameset cols="窗口1寬度，窗口2寬度，">
  <frame src="left.html"></frame>
   <frame src="right.html"></frame>
  </frameset>

在該語法中，cols 可以設置多個值，每個值對應一個框架窗口水平寬度，它的值可以使用像素單位或百分比單位。

示例：

<html>
<frameset cols="25%,50%,25%">
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">
</frameset>
</html>

顯示效果：

比如上面這個，被從左到右分割成3個窗口，寬度依次是25%,50%,25%。

2.3、嵌套分割窗口

嵌套窗口就是在一個頁面既有水平分割又有垂直分割的窗口，如下示例：

先水平分割再垂直分割

<frameset rows="50%,50%">
<frame src="/example/html/frame_a.html">
<frameset cols="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>

顯示效果：

先垂直分割再水平分割

<frameset cols="50%,50%">
<frame src="/example/html/frame_a.html">
<frameset rows="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>

顯示效果：

理論上可以無限嵌套，是不是很好玩。

2.4、noframes

當瀏覽器布置frame 時會顯示noframes 中的內容。如下代碼：

<html>
<frameset rows="50%,50%" frameborder="1" framespacing="100" bordercolor="blue">
<frame src="/example/html/frame_a.html">
<frameset cols="25%,75%" frameborder="0" bordercolor="orange">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>
</html>

效果顯示：

框架集的屬性

1、設置邊框 —— frameborder

frameborder 等於0時不顯示邊框，默認顯示。

2、邊框寬度 —— framespacing

在html5中無效。

3、邊框顏色 —— bordercolor

如下代碼：

<html>
<frameset rows="50%,50%" frameborder="1" framespacing="100" bordercolor="blue">
<frame src="/example/html/frame_a.html">
<frameset cols="25%,75%" frameborder="0" bordercolor="orange">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>
</html>

效果：

具體可以參考這裡 https://www.cnblogs.com/lavenderzh/archive/2012/04/09/2438803.html 查看這幾個屬性的關係。

框架頁面屬性

1、頁面源文件 —— src

就是每個框架窗口對應的html文件，這裡可以是圖片或其它文件。

<frame src="文件地址">

2、頁面名稱 —— name

給每個框架窗口設置名稱，有助於連結或查找窗口。

<frame src="文件地址" name="頁面名稱">

3、禁止調整窗口尺寸 —— noresize

黨員滑鼠拖到框架邊框時，會發現滑鼠形狀變成可拖動的，可以改不框架窗口寬度或高度。如果不希望改變窗口寬度或高度，可以使用noresize 屬性。

如下示例：

<html>
<frameset cols="25%,50%,25%">
  <frame noresize="noresize"  src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">
</frameset>
</html>

窗口a是不可改變寬度的。

浮動框架 —— iframe

浮動框架是一種特殊的框架，它是在主窗口中嵌套一個子窗口，也就是整個頁面不是框架頁面，但卻包含了一個框架窗口。

示例：

<iframe name="名稱" src="https://www.w3school.com.cn/" width="800px" height="600px"></iframe>

效果如下：

1、浮動框架邊框 —— frameborder

frameborder 屬性規定是否顯示 iframe 周圍的邊框。設置屬性值為 "0" 就可以移除邊框：

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

顯示效果：

2、連結到框架頁面

通過 a 標籤的 target 屬性可以跳轉到框架頁面，示例如下：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
</head> 
<body>
<iframe src="http://www.runoob.com/" name="iframe_a"></iframe>
<p><a href="https://mp.toutiao.com/" target="iframe_a">頭條號</a></p>
<p><a href="http://www.runoob.com/" target="iframe_a">菜鳥教程</a></p>
</body>
</html>

顯示效果如下，點擊下面2個連結，切換窗口。

總結

frame 和 iframe 浮動框架用途很廣，比如可以實現頁面局部刷新，在之前被廣泛使用，但是現在基本不建議使用，它有很多問題，比如安全性，性能方面等。

當然有時也會使用iframe，比如列印pdf，下載文件等等。

上篇：前端入門——html 表單控制項使用

前端入門——網頁中使用frame框架

什麼是 frame 框架

框架集的屬性

框架頁面屬性

浮動框架 —— iframe

總結