您的位置：首页 > Web前端 > JavaScript

如何动态改变Frame的大小？

2001-05-02 03:25 357 查看
简介：我想大家应该见过有些网站如Msdn.microsoft.com内一些分帧的页面在按下页面的某个按钮后，页面中的某个帧就会隐藏了，其实这种效果实现起来挺简单的，现在我们就来看看如何用Javascript来访问和修改Frame对象。
1.在开始前我先讲一下Frame的结构与语法: //下面是一个用frame页面的帧的代码
<html>


<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<frameset rows="117,498"> //如图这代表黄色框的分帧结构为上下分[rows表示上下 cols表示左右] 上为117下为498 包含top.htm与包含left.htm与main.htm的红色框的对象这两个属于同一级对象
<frame src="top.htm">
<frameset id=frame_bottom cols="200,*"> //这表示的是红色框内的分帧结构为左右左是200,右是除了左帧占据200后的所有空间，在这里我给了这个frameset一个id:frame_bottom这是为了方便后面用Javascript来访问这个对象
<frame src="left.htm">
<frame src="main.htm">
</frameset>
</frameset>
<noframes> //这是的用来显示当浏览器不支持frame时显示的页面内容
<body bgcolor="#FFFFFF" text="#000000">
你的浏览器不支持frame
</body>
</noframes>
</html>

2.动态修改frameset的内容
看完上面的代码你应该知道定义 frame_bottom 这个frameset对象的结构代码为 cols="200,*" 下面是动态修改的代码
<input type="button" name="Button" value="点这按钮将关闭左边的帧" onClick=reSetFrames()>
<script language="JavaScript">
function reSetFrames(){
top.frame_bottom.cols=(top.frame_bottom.cols=="0,*")?"200,*":"0,*"; //top代表的是所有frame对象的最高级对象也就是上面定义整体结构的代码，top.frame_bottom 就取得红色框这个对象，然后就修改 top.frame_bottom 对象的cols属性为一个新的值.来达到隐藏帧的效果
}
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript button 浏览器 function input html
相关文章推荐
新的分享
章节导航