网页框架与iframe详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_40131468/article/details/83996998

如何在一个网页文档中同时加载几个不同的html文件？

一个浏览器文档窗口一般只能显示一个网页文件，但是，使用框架标签就能将一个浏览器文档窗口分割成多个子窗口，每个子窗口都能够显示一个网页文件。

浏览器为每个框架保留一个单独的URL，浏览器可以向任何一个框架中加载新的web页面而不改变其他框架中的显示内容。

框架集标签：<frameset>...</frameset>

被划分为若干个框架的窗口区域被称为窗口集，框架窗口必须定义在窗口集中。frameset标签用来定义框架集中有几个框架以及框架是如何排列的。

frameset标签嵌套在<html>标签对中，也可以嵌套使用，但是必须放在body标签之外，因为frameset只能用来划分窗口而不能显示其他网页元素。

frameset的两个重要的属性：rows和cols。用来定义主文档中有几行或者几列框架窗口以及窗口的大小。至少使用其中一个属性。其中的*来代表未明确说明的空间。

如<frameset rows="40%,*" cols="*,*,*"> 表示有2行3列共6个窗口。

其他常用属性：

Border:设置边框粗细，默认5px

Bordercolor:设置边框颜色

Frameborder:指定是否显示边框，0表示不显示，1表示显示

Framespacing:表示框架与框架之间保留空白的距离

Noresize:设定框架不可调节，只要设定了前面的，后面的可以继承

框架标签:<frame>

必须放在frameset标签之间，用来定义某一个具体的框架窗口。

两个重要的属性：src和name

src指定窗口中初始装载的网页文件的url

name指定框架窗口的名字，供<a href=" " target=" ">中的target属性指定链接的HTML文档将显示在那一个框架中。

scrolling属性指定是否在窗口边显示滚动条，取值有yes,no,auto

noresize属性直接加入标签即可使用，不需要赋值，它是用来禁止用户拖动框架的分割线而调整框架的大小。

标签<noframes>...</noframes>

当浏览器版本台旧而不支持框架这个功能时，看到的将是一片空白。使用该标签时，浏览器就会看到该标签里的内容。该标签应紧包裹着body 标签。

实例：测试上述几个框架标签，需要创建几个不同的html。

//index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>frame-test-index</title>
	<frameset rows="60,*" cols="*" frameborder="yes" border="1" framespacing="2">
		<frame src="./top.html" name="topFrame" scrolling="no"/>
		<frameset rows="*" cols="192,*" framespacing="2" frameborder="yes" border="1">
			<frame src="./left.html" name="leftFrame" scrolling="yes" />
			<frame src="./right.html" name="rightFrame" scrolling="yes" />
		</frameset>
	</frameset>
</head>
	<noframes><body></body></noframes>
</html>


//top.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>top-html</title>
</head>
<body bgcolor="lightgray">
	<div align="center"><h1>HTML教程</h1></div>
</body>
</html>


//left.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>left</title>
	<style>
		table tr{
			display: block;
			margin-top: 20px;
		}

		table tr td{
			line-height: 24px;
			font-size: 18px;
		}
	</style>
</head>
<body>
	<table>
		<tr>
			<td><a href="./right.html" target="rightFrame">首页</a></td>
		</tr>
		<tr>
			<td><a href="./1.html" target="rightFrame">1.HTML入门</a></td>
		</tr>
		<tr>
			<td><a href="./2.html" target="rightFrame">2.页面布局与文字设计</a></td>
		</tr>
		<tr>
			<td><a href="./3.html" target="rightFrame">3.table表格</a></td>
		</tr>
		<tr>
			<td><a href="./4.html" target="rightFrame">4.文件的链接</a></td>
		</tr>
	</table>
</body>
</html>


//right.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>right</title>
</head>
<body>	
	<p>this is right-html</p>
</body>
</html>


//1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>1</title>
</head>
<body>
	this is 1-html
</body>
</html>

浮动窗口标签：<iframe>...</iframe>

该标签不需要放在frameset标签中，它的作用是在网页中间插入一个简单的框架窗口，在这个窗口中可以显示另外一个文件，实现画中画的效果。

实例：测试iframe，这里也需要创建几个不同的html文档。

//index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>iframe test</title>
</head>
<body>
	<div id="top"><h1>自我介绍</h1></div>
	<div id="down">
		<ul>
			<li><a href="./myresume.html" target="myFrame">个人资料</a></li>
			<li><a href="./study.html" target="myFrame">学习情况</a></li>
			<li><a href="./work.html" target="myFrame">工作经历</a></li>
		</ul>
		<iframe src="./myresume.html" name="myFrame" frameborder="1" width="400" height="250"></iframe>
	</div>
</body>
</html>


//myresume.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>My resume</title>
</head>
<body>
	<p>姓名：张三</p>
	<p>生日：1998年10月4日</p>
	<p>电子邮箱：safe@168.com</p>
</body>
</html>

html框架标签