文章目錄
如今，框架都很香！
在這個追求性能的時代，frameset/frame和iframe這種落伍的東西幾乎沒人用了吧。
沒關係，當回看客吧。
frame/frameset
// helloworld.html
<div>
hello world
</div>
//index.html
<frameset rows="100,*" cols="100,*" frameborder="0" >
<frame src="./helloworld.html" name="helloworld">
</frameset>
frame
frame不能獨立存在，必須嵌在frameset中frame的寬？由frameset上的cols屬性決定frame的高？由frameset上rows屬性決定
說白了，frame就是個“媽寶男”，離不開它媽frameset，也很聽媽媽的話。
frameset
rows="100,*"
垂直空間共分成了兩行，其中一行佔了100px，另一行則佔據剩餘所有空間。而高爲100px的這行則分配給了helloworld這個frame。cols="100,*"
水平空間共分成了兩列，其中一列佔了100px，另一列則佔據剩餘所有空間。而寬爲100px的這列則分配給了helloworld這個frame。frameborder="0"
frameset有沒有邊框？frameborder等於0，則沒有邊框；frameborder不等於0，則有邊框。border="1"
frameset有邊框，邊框有多寬？其屬性border說了算。當然，前提是frameborder不等於0。bordercolor="lightblue"
frameset有邊框，邊框啥色？其屬性bordercolor說了算。當然，前提是frameborder不等於0。
frame和body 相煎很着急
frameset和body，水火不容。
誰“跑”在前，誰就“贏”了。
所以，更別妄想body宰相肚裏撐frameset。
<body>
<frameset rows="100,*" cols="200,*" frameborder="0">
<frame src="./helloworld.html">
</frameset>
</body>
稍全乎的一個例子
index.html
<html>
<frameset rows="100,100,*" border=1 bordercolor="lightblue" frameborder=1>
<frame src="./top.html" name="topFrame">
<frameset cols="100,100,*">
<frame src="left.html" name="leftFrame">
<frame src="middle.html" name="middleFrame">
<frame src="right.html" name="rightFrame">
</frameset>
<frame src="./bottom.html" name="bottomFrame">
</frameset>
</html>
//top.html
<div class="top">
hello, I'm top frame.
</div>
//bottom.html
<div class="bottom">
hello, I'm bottom frame.
</div>
//left.html
<div class="left">
hello, I'm left frame.
</div>
//middle.html
<div class="middle">
hello, I'm middle frame.
</div>
//right.html
<div class="middle">
hello, I'm middle frame.
</div>
每個frame都有一個自己的window對象
比如，我們切換到topFrame(top.html)，window.name就是我們在frame標籤設置的值topFrame。
window.top
記得我剛接觸js的時候，想定義一個哪哪兒都能用的全局變量（當然，這個想法並不好），一位後端同事告訴我，“用window.top”。
瞧，那藍藍的就是window.top，它是所有frame的最外層。
如果你是直接使用chrome打開本地html文件，就會遇到這個問題，原因是瀏覽器的同源策略。協議相同、域名相同、端口相同，才同源，否則跨源了。
解決這個問題，我們就構建一個小型的本地服務器吧。
const express = require("express");
const path = require("path");
const app = express();
app.use(express.static(path.join(__dirname,"src")));
app.listen(3300,function(){
console.log("listening on *:3300");
})
瀏覽器地址欄輸入localhost:3300，接下來就可以訪問了。
window.parent
顧名思義，就是上一層框架。
iframe
相較於frame，iframe簡直就是“獨立、有主見、具有合作精神的新時代好青年”。
- 可單獨存在，也可嵌在
body中
//content.html
<div>
致敬奮鬥者！
</div>
//可以獨立存在
<html>
<iframe src="./content.html" width="150" height="100" frameborder="1" ></iframe>
</html>
//可以嵌在body中
<html>
<body>
<iframe src="./content.html" width="150" height="100" frameborder="1" ></iframe>
</body>
</html>
- 寬？由自己的
width屬性決定；高？由自己的height屬性決定。默認寬高是300*150。另外，寬高也可以通過css來控制。
//iframe的寬、高分別由自己width、height屬性控制
<iframe src="./content.html" width="150" height="100" frameborder="1" ></iframe>
//iframe的寬、高通過css控制
<iframe src="./content.html" style="width:150px;height:100px;" frameborder="1" ></iframe>
iframe有沒有邊框？frameborder等於0，則沒有邊框；frameborder不等於0，則有邊框。- 有邊框，邊框多寬？是啥色？通過css的
border控制
<iframe src="./content.html" style="border:1px solid lightblue" width="150" height="100" frameborder="1" ></iframe>
