一、 框架
所谓框架，就是把网页在一个浏览器窗口下分割成几个不同的区域，实现在一个浏览器窗口中显示多个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="２５％，＊"
垂直切割画面(如：分左右两个画面)，接受整数值、百分数， ＊ 则代表占用馀下空 间。数值的个数代表分成的视窗数目且以逗号分隔。例如 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>
242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
