[前端 1] 使用frameset框架構建網頁基本佈局
阿新 • • 發佈：2018-12-23
導讀：在做專案的過程中，發現網頁的一些地方是不變的，比如說頂部、底部。而變幻的內容就只是一部分。這個時候在想，這是每次都重新整理一個介面呢，還是有別的快捷方法呢。然後就找到了frameset 這個東西。本篇部落格是結合一個小例項對frameset的簡單介紹。
一、是什麼
frameset 元素可定義一個框架集。它被用來組織多個視窗（框架）。每個框架存有獨立的文件。在其最簡單的應用中，frameset 元素僅僅會規定在框架集中存在多少列或多少行。
優點：
1，在frameset裡使用iframe來實現常規的一些分欄佈局，可以藉助一個頁面承載多個頁面的方式來重用頁面程式碼。
2，一個頁面中的iframe之間可以互相實現關聯，而且不需要依靠過多的js就可以實現類似“區域性”重新整理的機制。
缺點：
1，如果要實現不同iframe之間的dom元素產生互動和關聯，需要的js複雜程度較高，而且有些根本實現不了（比如拖拽，比如使用者自定製頁面佈局）。
2，一個頁面承載多個頁面的http請求，而且實現那種類似區域性重新整理的效果，不是後臺執行請求的機制，而也是使用了前臺的瀏覽器重新整理機制，會有延遲的響應而且無法對響應進行控制（比如loading或者一些響應狀態的監聽）。
使用場景：
適用於有固定佈局的系統
二、例項簡介
2.1，上、下、左的佈局
top：
<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>freamset——top</title> </head> <body> <div style="text-align:center;color:blue;font-size:50px">（這裡是頭部）牡丹亭</div> </body> </html> </span>
bottom：
<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>freamset——bottom</title> </head> <body> <div style="text-align:center;color:blue;font-size:30px">（底部） 《皁羅袍》 </div> </body> </html> </span>
left：
<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>freamset——left</title>
</head>
<body>
<div style="color:blue;font-size:30px">（左邊）
</br>
《牡丹亭》
</br>
作者：湯顯祖
</br>
<a target="right" href="right.html">前兩句</a> </br>
<a target="right" href="myright.html">後兩句</a>
</div>
</body>
</html> </span>2.2，center中的右面佈局
<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>freamset——right</title>
</head>
<body>
<div style="color:blue;font-size:30px">（右邊前兩句）
</br>
原來奼紫嫣紅開遍
</br>
似這般都付與斷井頹垣
</div>
</body>
</html> </span><span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>freamset——myright</title>
</head>
<body>
<div style="color:blue;font-size:30px">（右邊後兩句）
</br>
良辰美景奈何天
</br>
賞心樂事誰家院
</div>
</body>
</html> </span>2.3，混合的frameset佈局
<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>freamset——index</title>
<frameset rows="15%,80%,5%">
<frame name="top" src="top.html" /><--擁有15%的高度-->
<frameset cols="25%,75%"><--擁有80%的高度-->
<frame name="left" src="left.html"><--擁有25%的寬度-->
<frame name="right" src=""><--擁有75%的寬度-->
</frameset>
<frame name="bottom" src="bottom.html" /><--擁有5%的高度-->
</frameset>
</html> </span>2.4，效果
三、總結
利用frameset標籤可以設定一個固定的網站佈局，但是在HTML5中，已經不支援這個屬性了。那麼我想肯定有一種可以替代的東西。接下來，還需要了解一些別的相關的東西，比如IFrame等。