frame和 iframe，曾经也是不一样的烟火


文章目录

      • frame/frameset
        • frame
        • frameset
        • frame和body 相煎很着急
        • 稍全乎的一个例子
          • 每个frame都有一个自己的window对象
          • window.top
            • window.parent
      • iframe

如今，框架都很香！
在这个追求性能的时代，frameset/frame和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属性决定

说白了，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。

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对象

比如，我们切换到topFrame(top.html)，window.name就是我们在frame标签设置的值topFrame。
在这里插入图片描述

window.top

记得我刚接触js的时候，想定义一个哪哪儿都能用的全局变量（当然，这个想法并不好），一位后端同事告诉我，“用window.top”。
瞧，那蓝蓝的就是window.top，它是所有frame的最外层。
在这里插入图片描述
如果你是直接使用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");
})

1.
浏览器地址栏输入localhost:3300，接下来就可以访问了。
在这里插入图片描述

window.parent

顾名思义，就是上一层框架。

iframe

相较于frame，iframe简直就是“独立、有主见、具有合作精神的新时代好青年”。

  • 可单独存在，也可嵌在body中
1
2
3
4
//content.html
<div>
    致敬奋斗者！
</div>
1
2
3
4
//可以独立存在
<html>
    &lt;iframex src="./content.html" width="150" height="100" frameborder="1" >&lt;/iframex&gt;
</html>
1
2
3
4
5
6
//可以嵌在body中
<html>
<body>
    &lt;iframex src="./content.html" width="150" height="100" frameborder="1" >&lt;/iframex&gt;
</body>
</html>
  • 宽？由自己的width属性决定；高？由自己的height属性决定。默认宽高是300*150。另外，宽高也可以通过css来控制。
1
2
//iframe的宽、高分别由自己width、height属性控制
&lt;iframex src="./content.html" width="150" height="100" frameborder="1" >&lt;/iframex&gt;
1
2
//iframe的宽、高通过css控制
&lt;iframex src="./content.html" style="width:150px;height:100px;" frameborder="1" >&lt;/iframex&gt;
  • iframe有没有边框？frameborder等于0，则没有边框；frameborder不等于0，则有边框。
  • 有边框，边框多宽？是啥色？通过css的border控制
1
&lt;iframex src="./content.html" style="border:1px solid lightblue" width="150" height="100" frameborder="1" >&lt;/iframex&gt;

在这里插入图片描述