iframe的例子:
10.4 浮动 框 架
浮动框架是一种较为特殊的框架,它是在浏览器窗口中嵌套子窗口,也就是整个页面并不是框架页面,但是却包含一个框架窗口,在框架窗口内显示相应的页面内容。
语法:
<iframe src="页面源文件">
</iframe>
说明:与普通框架结构类似,浮动框架也可以设置很多参数,见表10-1。
表10-1 浮动框架的参数设置
浮动框架可以设置的参数 参数的含义
src 浮动框架页面的源文件地址
width 浮动框架在页面中显示的宽度
height 浮动框架在页面中显示的高度
align浮动框架页面在浏览器中的对齐方式,可以为左对齐、右对齐或居中对齐
name 设定框架页面的名称
marginwidth 设置页面与边框的水平间距
marginheight 设置页面与边框的垂直间距
scrolling 设定浮动框架页面内是否显示滚动条
frameborder 设定浮动框架的边框
从表 10-1 中可以看出,很多普通框架页面的属性在浮动框架页面中同样适用,例如name、scrolling等,而在普通框架中只对框架集有效的一些参数在这里同样可以设置,如frameborder 等,此外浮动框架页面还可以设置大小和对齐方式。而对于浮动框架来说,框架边框的宽度和颜色是无法设置的,即与普通框架相比,浮动框架中不包含framespacing 和bordercolor 参数。
本节将主要通过设置框架页面的参数和不设置进行对比,从而清晰地说明各个参数的功能。为了达到这一目的,需要进行如下的准备工作:创建两个普通的HTML 页面,其中一个作为浮动框架的载体,命名为float.html;另一个作为浮动框架页面的源文件,命名为source.html。
float.aspx文件的源代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<font size="5" color="#CC0000">在这一个页面中将会添加一个浮动框架页面</font>
<hr size="2" />
<iframe src="source.aspx" width="900px" height="400px"></iframe>
</div>
</form>
</body>
</html>
source.aspx文件的源代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<font size="5" color="#000099">经典影片:魂断蓝桥</font><br /><br />
《魂断蓝桥》作为电影史上三大凄美不朽爱情影片之一,是一部荡气回肠的爱情经典之作,内容虽有些传奇
化,但文艺气息浓厚,具有甚高的催泪效果。<br />
《魂断蓝桥》(又名《滑铁卢桥》)是一部风靡全球近半个世纪的美国爱情故事片,也是西方电影在东方获
得成功的经典。<br />
<hr />
剧情介绍:<br />
一次偶然的机会,芭蕾舞女演员玛亚在滑铁卢桥邂逅了高级军官罗伊。由于战争的原因,两人决定马上结婚,
但就在婚礼即将举行的前一天晚上,罗伊接到命令,部队当晚开拔。玛亚无意中看到了罗伊的名字在阵亡名单中。
此时罗伊的母亲来看她,尽管这位贵夫人非常和蔼可亲,但此时的玛亚已情绪混乱、言语无礼、不知所云。为了
维持生活,玛亚和她的好友都沦为街头应招女郎。罗伊并没有死,他回来了。玛亚的遭遇使她无法面对与罗伊的
婚姻及罗伊家族的显赫地位。她来到滑铁卢桥,毫无畏惧地向一辆辆飞驰的军车走去。
</div>
</form>
</body>
</html>
完成了两个页面文件之后,下面开始设置浮动框架页面的内容。
10.4.1 必需参数:页面源文件——src
浮动框架中最基本的参数就是src,它用来设置浮动框架页面的源文件地址,也是浮动框架页面必
需的参数。因为只有设置了源文件的内容,浮动框架才有意义。
语法:<iframe src="页面源文件">
下面介绍在浮动框架页面中可以设置的一些框架页面不能设置的参数,称为浮动框架特有参数,主要包括框架的页面大小以及对齐方式。
10.4.2 特有属性:大小——width 和height
在普通框架结构中,由于框架就是整个浏览器窗口,因此不需要设置其大小。但是在浮动框架中,框架是插入到普通HTML 页面中的,所以可以调整整个框架的大小。
语法:<iframe src="浮动框架页面源文件" width="页面宽度" height="页面高度">
说明:在该语法中,页面的宽度和高度值都以像素为单位。
运行这段代码,效果如图10-15 所示,与图10-14 相对比,可以看到页面中的框架大小被调整得更加协调。