文章目录
- frame/frameset
- frame
- frameset
- frame和body 相煎很着急
- 稍全乎的一个例子
- 每个frame都有一个自己的window对象
- window.top
- window.parent
- iframe
如今,框架都很香!
在这个追求性能的时代,
没关系,当回看客吧。
frame/frameset
1 2 3 4 | // helloworld.html <div> hello world </div> |
1 2 3 4 | //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 属性决定
说白了,
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 相煎很着急
谁“跑”在前,谁就“赢”了。
所以,更别妄想
1 2 3 4 5 | <body> <frameset rows="100,*" cols="200,*" frameborder="0"> <frame src="./helloworld.html"> </frameset> </body> |
稍全乎的一个例子
1 2 3 4 5 6 7 8 9 10 11 12 | 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> |
1 2 3 4 | //top.html <div class="top"> hello, I'm top frame. </div> |
1 2 3 4 | //bottom.html <div class="bottom"> hello, I'm bottom frame. </div> |
1 2 3 4 | //left.html <div class="left"> hello, I'm left frame. </div> |
1 2 3 4 | //middle.html <div class="middle"> hello, I'm middle frame. </div> |
1 2 3 4 | //right.html <div class="middle"> hello, I'm middle frame. </div> |
每个frame都有一个自己的window对象
比如,我们切换到
window.top
记得我刚接触js的时候,想定义一个哪哪儿都能用的全局变量(当然,这个想法并不好),一位后端同事告诉我,“用window.top”。
瞧,那蓝蓝的就是
如果你是直接使用chrome打开本地html文件,就会遇到这个问题,原因是
解决这个问题,我们就构建一个小型的本地服务器吧。
1 2 3 4 5 6 7 | 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
相较于
- 可单独存在,也可嵌在
body 中
1 2 3 4 | //content.html <div> 致敬奋斗者! </div> |
1 2 3 4 | //可以独立存在 <html> <iframex src="./content.html" width="150" height="100" frameborder="1" ></iframex> </html> |
1 2 3 4 5 6 | //可以嵌在body中 <html> <body> <iframex src="./content.html" width="150" height="100" frameborder="1" ></iframex> </body> </html> |
- 宽?由自己的
width 属性决定;高?由自己的height 属性决定。默认宽高是300*150 。另外,宽高也可以通过css来控制。
1 2 | //iframe的宽、高分别由自己width、height属性控制 <iframex src="./content.html" width="150" height="100" frameborder="1" ></iframex> |
1 2 | //iframe的宽、高通过css控制 <iframex src="./content.html" style="width:150px;height:100px;" frameborder="1" ></iframex> |
iframe 有没有边框?frameborder 等于0 ,则没有边框;frameborder 不等于0 ,则有边框。- 有边框,边框多宽?是啥色?通过css的
border 控制
1 | <iframex src="./content.html" style="border:1px solid lightblue" width="150" height="100" frameborder="1" ></iframex> |