10.3  内嵌框架Iframe

10.3.1  关于Iframe

Iframe是框架的一种标记,在页面设计中经常用到。
Iframe标记又叫浮动帧标记,使用Iframe可以将一个文档嵌入在另一个文档中显示,可以随处引用不拘泥网页的布局限制。在当今互联网网络广告横行的时代,Iframe更是无孔不入,将嵌入的文档与整个页面的内容相互融合,形成了一个整体。
与框架相比,内嵌框架Iframe更容易对网站的导航进行控制,最大的优点在于其灵活性。
在文档中插入Iframe时由于Dreamweaver 8中没有可视化的操作,需手工添加代码完成,内嵌框架的代码标记为<Iframe></Iframe>。
图10.18所示为使用Iframe所制作的网页效果。具体操作步骤如下:
图10.18  使用Iframe制作的网页效果
(1)打开配书光盘中的案例/frame/iframe/index.htm。
(2)切换到代码视图,显示index.htm的网页源代码如下:
<html>
<head>
<title>企业版监控管理界面</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body background="images/bookbg.gif" leftmargin="0" topmargin="0" style="overflow:hidden">
<iframe name="head"  width="100%" frameborder="0" height="104" scrolling="no" marginwidth="0" marginheight="0" src="head.htm"></iframe>
<iframe name="main"  width="100%" frameborder="0"  height="73.8%" scrolling="no" marginwidth="0" marginheight="0" src="main.htm"></iframe>
<iframe name="foot"  width="100%" frameborder="0" height="50" scrolling="no" marginwidth="0" marginheight="0" src="foot.htm"></iframe>
</body>
</html>
由上段代码可知,index.htm由3个上、中、下排列的Iframe组成,根据页面的制作要求设置Iframe的高度和宽度。

10.3.2  Iframe属性

通过设置Iframe的属性,可以让Iframe与所嵌入的文档整体结合,更能体现Iframe的优势。
在下段代码中设置Iframe的属性:
<iframe name="main"  width="100%" frameborder="0"  height="73.8%" scrolling="no" marginwidth="0" marginheight="0" src="main.htm"></iframe>
在代码中,Iframe用到了几个参数来设置其属性,Iframe常用的属性值如表10.1所示。
表10.1  Iframe常用属性
属    性
说    明
Src
Iframe的文件路径
Name
Iframe框架名称,不可为中文
Longdesc
对Iframe进行描述
Width
设置Iframe的宽度
Height
设置Iframe的高度
Align
设置Iframe的对齐方式:top、middle、bottom、left、right
Frameborder
设置Iframe的边框
Marginwidth
设置Iframe距离所在网页元素左右的宽度
Marginheight
设置Iframe距离所在网页元素上下的高度
Scrolling
设置Iframe滚动条显示方式:yes(显示)、no(不显示)、auto(自动)
Iframe的更多的属性参考表10.2,引自CSDN论坛。
表10.2  Iframe属性参考值
属    性
说    明
nRight
设置或获取对象的右边距宽度
margin-top marginTop
设置或获取对象的上边距宽度
overflow-x overflowX
设置或获取当内容超出对象宽度时如何管理对象内容
overflow-y overflowY
设置或获取当内容超出对象高度时如何管理对象内容
pixelBottom
设置或获取对象的下方位置
pixelHeight
设置或获取对象的高度
pixelLeft
设置或获取对象的左侧位置
pixelRight
设置或获取对象的右侧位置
pixelTop
设置或获取对象的上方位置
pixelWidth
设置或获取对象的宽度
posBottom
设置或获取以bottom标签属性指定的单位的对象下方位置
posHeight
设置或获取以height标签属性指定的单位的对象高度
position position
设置或获取对象所使用的定位方式
posLeft
设置或获取以left标签属性指定的单位的对象左侧位置
续表
属    性
说    明
posRight
设置或获取以right标签属性指定的单位的对象右侧位置
posTop
设置或获取以top标签属性指定的单位的对象上方位置
posWidth
设置或获取以width标签属性指定的单位的对象宽度
right right
设置或获取对象相对于文档层次中下个已定位对象的右边界的位置
float styleFloat
设置或获取文本要绕排到对象的哪一侧
text-autospace textAutospace
设置或获取自动留空和文本的窄空间宽度调整
top top
设置或获取对象相对于文档层次中下个定位对象的上边界的位置
visibility visibility
设置或获取对象的内容是否显示
z-index z-index
设置或获取定位对象的堆叠次序
zoom zoom
设置或获取对象的放大比例

10.3.3  设置Iframe自适应高度

使用Iframe最常见的问题就是高度的设置,高度设小了会让一部分内容显示不全,设大了又会让页面多出一块空白,导致页面整体失调。如何让Iframe随嵌入网页中的单元格高度自动变化就成了迫切要解决的问题,下面来介绍如何设置Iframe自适应高度。
(1)打开配书光盘中案例/frame/iframe/index_h.htm,切换到代码视图,文档全文代码如下。
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>企业版监控管理界面,设置内容</title>
</head>
<body background="images/bookbg.gif" leftmargin="0" topmargin="0" >
<iframe name="main"  width="100%" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" src="main.htm"></iframe>
</body>
</html
由代码可以看出Iframe未设定高度,此时在浏览器中浏览的效果如图10.19所示,在页面中没有显示出全部的Iframe嵌入页的内容。
(2)让Iframe可以自动随页面高度调整和自动适应,方法很简单,在页面代码</body>标记之前,插入下段代码:
<Script for=window EVENT=onload LANGUAGE="JScript">
  document.all("main").height=main.document.body.scrollHeight;
</Script>
(3)保存当前页面,再浏览index_h.htm,如图10.20所示,整个页面显示出了全部的内容。
图10.19  未设定Iframe高度的页面
图10.20  Iframe设置自适应高度的页面
技巧:其中,在document.all("main").height=main.document.body.scrollHeight中的main为Iframe框架的名称。