一、 框架
所谓框架,就是把网页在一个浏览器窗口下分割成几个不同的区域,实现在一个浏览器窗口中显示多个HTML页面。
二、 认识Frameset和Frame
<Frameset>称作框架标记,用以宣告Html文件为框架模式,并设定视窗如何分割。
<Frame>则只是设定某一个框窗内的参数属性。
Frameset元素是frame元素的容器,html文档可包含frameset元素或body元素之一,但是不能同时包含两者。真是这样子么?
下面的例子使用了 FRAMESET 元素来定义页面中的三列矩形。
<FRAMESET COLS="25%, 50%, *">
<FRAME SRC="contents.htm">
<FRAME SRC="info.htm">
<FRAME SCROLLING="NO" SRC="graphic.htm">
</FRAMESET>
COLS="25%,*"
垂直切割画面(如:分左右两个画面),接受整数值、百分数, * 则代表占用馀下空 间。数值的个数代表分成的视窗数目且以逗号分隔。例如 COLS="30,*,50%" 可以切成三个视窗,第一个视窗是 30 pixels 的宽度,为一绝对分割,第二个视窗是当分配完第一及第三个视窗后剩下的空间,第三个视窗则占整个画面的 50% 宽度为一相对分割。您可自己调整数字。
ROWS="120,*"
就是横向切割,将画面上下分开,数值设定同上。唯 COLS 与 ROWS 两参数尽量不要同在一个 <FRAMESET> 标记中,因 Netacape 偶然不能显示这类形的框架,尽量采用多重分割。
二、 noframes
当别人使用的浏览器太旧,不支援框架这个功能时,他看到的将会是一片空白。为了避免 这种情况,可使用 <NOFRAMES> 这个标记,当使用者的浏览器看不到框架时,他就会看到 <NOFRAMES> 与 </NOFRAMES> 之间的内容,而不是一片空白。这些内容可以是提醒浏览转用新的浏览器的字句,甚至是一个没有框架的网页或能自动切换至没有框架的版本 亦可。
应用方法:
在<frameset> 标记范围加入 </NOFRAMES> 标记,以下是一个例子:
<frameset rows="80,*">
<noframes>
<body>
很抱歉,阁下使用的浏览器不支援框架功能,请转用新的浏览器。
</body>
</noframes>
<frame name="top" src="a.html">
<frame name="bottom" src="b.html">
</frameset>
若浏览器支援框架,那麽它不会理会 <noframes> 中的东西,但若浏览器不支援框架,由于不认识所有框架标记,不明的标记会被略过,标记包围的东西便被解读出来,所以放在 <noframes>范围内的文字会被显示。
三、 iframe
<iframe>是框架的一种形式,并且iframe可以嵌在网页中的任意部分。
它的作用是在一页网页中间插入一个框窗以显示另一个文件。它是 一个围堵标记,但围着的字句只有在浏览器不支援 iframe 标记时才会显示,如<noframes> 一样,可以放些提醒字句之类。通常 iframe 配合一个辨认浏览器的 JavaScript 会较好,若 JavaScript 认出该浏览器并非 Internet Explorer 便会切换至另一版本。
一定要使用</iframe>关闭,否则后面的内容显示不出来。
iframe标记的使用格式我们以实例来说明:
实例分析:<iframe id="baiduSpFrame" border="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" framespacing="0" frameborder="0" scrolling="no"width="468"height="60"src="../asp/upfiles/5.gif"></iframe> |
引号部分为参数:实用中你只需修改引号中参数即可。
border="0" (数值)设定框架的边框厚度,以 pixels 为单位。
vspace="0" (数值)属性设置或返回图像的顶部和底部的空白
hspace="0" (数值) 设置或返回图像的左边缘和右边缘的空白
marginwidth="0"(数值) 属性可设置或返回框架的左边缘和右边缘的页空白
marginheight="0"(数值) 属性可设置或返回框架的顶部缘和底部边缘的页空白
framespacing="0" (数值)表示框架与框架间保留的空白的距离
frameborder="0"(数值)区域边框宽度,为了让框架内容与邻近内容相融合,常设置为0。
scrolling="no"(NO/yes/Auto)滚动条设置: NO:不显示;Yes:显示Auto:自动选择;
width="468"(宽度)“src=” 引入部分显示的宽度
height="60"(高度)“src=” 引入部分显示的高度
src="../5.gif"(路径)文件的路径,既可是HTML文件,也可以是文本、ASP等
四、Iframe自适应高度和宽度
<script>
function autoResize()
{
try
{
document.all["inner"].style.height=inner.document.body.scrollHeight
}
catch(e){}
}
</script>
<iframe name="inner" src="xxx.asp" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" width="100%" style="height:expression(1); aho:expression(autoResize())">
</iframe>
<iframe name="temp" height="0"></iframe>
IE5及其以后版本支持在CSS中 使用expression,用来把CSS属性和Javas cript表达式关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式,CSS属性的值等于Javas cript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。
aho的意思是装载页面自动执行
五、刷新iframe的方法:
<iframe src="1.htm" name="ifrmname" id="ifrmid"></iframe>
方案一:用iframe的name属性定位
<input type="button" name="Button" value="Button"
οnclick="document.frames('ifrmname').location.reload()">
或
<input type="button" name="Button" value="Button"
οnclick="document.all.ifrmname.document.location.reload()">
方案二:用iframe的id属性定位
<input type="button" name="Button" value="Button"
οnclick="ifrmid.window.location.reload()">
终极方案:当iframe的src为其它网站地址(跨域操作时)
<input type="button" name="Button" value="Button"
οnclick="window.open(document.all.ifrmname.src,'ifrmname','')">
六、通过iframe获取父页面值
window.parent 是iframe页面调用父页面对象,当我们想从iframe内嵌的页面中访问外层页面是可以直接利用window.parent获取;
例子如下:
A.html
<html>
<head>
<title>父页面</title>
</head>
<body>
<form id="form1" action="">
<div>
输入值:
<input type="text" name="username" id="username" /><br />
<iframe src="b.html" width="400px" height="300px"></iframe>
</div>
</form>
</body>
</html>
B.html
<html>
<head>
<script type="text/javascript">
function getpValue()
{
document.getElementById("span1").innerText=window.parent.document.getElementById("username").value;
}
</script>
</head>
<body>
<span>文本框值为:</span><span id="span1"></span><br />
<input type="button" value="获取父窗口内的文本框值" οnclick="getpValue();">
</body>
</html>