前面我们讲了frame标签，本节来看iframe标签。
二者的区别主要在于能否独立使用，且frame的宽高由frameset设定，frameset设定的宽高为显示比例。当浏览器改变尺寸时，框架的大小也会按比例进行缩放。
而iframe是可以独立使用的，它可以放在页面中的任意位置，iframe的尺寸由iframe自身的width和height属性设定，该设定为像素尺寸，即：固定尺寸。当浏览器尺寸改变时框架的尺寸不会缩放。
下面先看示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML中的框架 iframe标签</title>
</head>
<body>
<iframe src="a.html" frameborder="0" width="400" height="400"></iframe>
<iframe src="b.html" frameborder="0" width="400" height="400"></iframe>
<iframe src="c.html" frameborder="0" width="400" height="400"></iframe>
<iframe src="d.html" frameborder="0" width="400" height="400" name="d"></iframe>
</body>
</html>
以上代码中我们在body标签中添加了四个iframe标签，并分别设置了宽高，然后分别引入了abcd四个html页面，在a.html页面中我们添加了一个a链接，我们希望点击a链接的时候在d页面打开该链接。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
a页面
<br>
<a href="https://www.teamczyx.com" target="d">在d页面中打开</a>
</body>
</html>
实现结果如下：
实现在其它框架中打开指定页面的语法如下：
- 1、如果要在其它框架中打开一个页面，就把a标签的target设置为对应的框架名name
- 2、如果要在当前框架中打开一个页面，就把a标签的target设置为_self
- 3、如果要在父框架中打开一个页面，就把a标签的target设置为_parent
下面我们再看一下框架嵌套的问题
先放上实现结果
看到以上结果图后大家首先想到的实现方法可能是在iframe标签对中再放一个iframe标签对，这是错误的，因为iframe标签对中不能显示任何内容。
正确的方法是：
顶级的页面引入a.html页面，在a.html页面引入b.html，以此类推。
最终形成的代码结构如下：
下面是实现逻辑代码
index.html中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML中的框架 iframe标签以及多层iframe嵌套</title>
</head>
<body>
<iframe src="a.html" frameborder="0" width="500" height="500"></iframe>
</body>
</html>
a.html中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
a页面
<a href="https://www.teamczyx.com" target="d">在d页面中打开</a>
<iframe src="b.html" frameborder="0" width="400" height="400"></iframe>
</body>
<style>
body{
background-color: antiquewhite;
}
</style>
</html>
b.html中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
b页面
<a href="https://www.teamczyx.com" target="_self">在当前页面中打开</a>
<iframe src="c.html" frameborder="0" width="300" height="300"></iframe>
</body>
<style>
body{
background-color: rgb(170, 141, 103);
}
</style>
</html>
c.html中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
c页面
<a href="https://www.teamczyx.com" target="_parent">在父框架中打开，即：b页面</a>
<iframe src="d.html" frameborder="0" width="200" height="200" name="d"></iframe>
</body>
<style>
body{
background-color: rgb(201, 123, 22);
}
</style>
</html>
d.html中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
d页面
</body>
<style>
body{
background-color: rgb(161, 99, 17);
}
</style>
</html>
以上代码中我们还分别演示了如何在当前框架中打开、如何在指定框架中打开、如何在父框架中打开，大家可以把代码复制出去动手测试一下。
以上就是HTML中iframe标签以及多层iframe嵌套的核心知识点，其中iframe还有很多标签，这里就不做讲解了，网上一查iframe的属性，到处都是。
|
窥视卡
雷达卡
发表于 2023-1-31 12:53:09
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-15 11:46:11
