HTML中的框架frameset以及内联框架iframe的使用

最新推荐文章于 2022-02-17 16:52:04 发布

Bella2.0

最新推荐文章于 2022-02-17 16:52:04 发布

阅读量442

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/weixin_44759795/article/details/110471275

版权

html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

框架优缺点：

每份html文档称为一个框架，每个框架都独立于其他的框架。通过使用框架，可以在同一个浏览器窗口中显示不止一个页面，可以将多个html文档聚合显示。但是使用框架后开发人员必须同时跟踪更多的HTML文档，并且很难打印整张页面。

框架使用

框架结构标签
<frameset>定义了如何将窗口分割为框架，每个frameset都定义了一系列的行或者列，其中rows和columns的值分别规定了每行和每列占据屏幕的面积。
框架标签
<frame>定义了放置在每个框架中的的html文档。

<!--定义了一个两列的框架集，第一列占据浏览器窗口宽度25%，第二列75%-->
<frameset cols="25%,75%">
	<frame src="第一个引用页面">;
	<frame src="第二个引用页面">;
</frameset>

这种直接设置的框架都有一个可见边框，用户拖动边框可以改变它的大小，若是不想发生这种情况可以在frame标签中加入noresize="noresize"。
不支持框架的浏览器需要添加noframeset标签。不能将body标签和frameset标签同时使用，不过假如添加了一段包含文字的noframes标签，就必须将这段文字嵌套到body标签内。

<html>

<frameset cols="25%,50%,25%">
	<frame src="第一个引用页面">;
	<frame src="第二个引用页面">;
	<noframes>
		<body>您的浏览器无法处理框架！</body>
	</noframes>
</frameset>
</html>

我们还可以设置导航框架：

<html>

<frameset cols="120,*">

  <frame src="第一个页面">
  <frame src="第二个页面" name="showframe">

</frameset>

</html>

在这里插入图片描述
这样通过点击不同的链接名，可以将右边的页面切换为不同的页面。
其他相应的例子见W3C的html框架中。

内联框架

一般内联框架使用较为频繁。它是通过ifame标签来定义的。使用方法：<iframe src="URL" width=“宽度如200” height="高度"></iframe>。一般默认宽高的单位为像素，也可以用百分比来表示。
要移除内联框架的边框，要给其添加frameboder=“0”


<iframe src="URL" width=“200” height="200" frameboder=“0></iframe>

可以使用iframe来显示目标链接页面，代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<iframe src="刚开始网页嵌入框架中显示的页面地址" name="要跳转到的页面名称，如：iframe_j" width="600" height="500"></iframe>
<a href="点击链接跳转后框架中显示的网页地址" target="iframe_j">跳转链接</a>
</body>
</html>