javascript基础学习-简单框架(六)

1.在html标签中有一个iframe标签,此标签的意思是将一个子html页面嵌入到另一个html页面,我们把这个子页面也叫做内帧.
 <html>
	<head>
		<title>FrameTest1</title>
	</head>
	<body>
		我是主页面.
		<table width="100%" align="center" border="1">
			<tr>
				<td>
					<iframe name="child" width="100%" height="20%" src="Child.html"></iframe>
				</td>
			</tr>
		</table>
	</body>
  </html>
  Child.html代码如下:
  <html>
	<head>
		<title>Child</title>
	</head>
	<body>
		我是内帧.
	</body>
  </html>
  显示结果略.
2.通过上面的小例子我们知道了如何通过ifame标签将一个html页面嵌入到另一个html页面中,通过这点我们可以搭建自己的html框架.
  注意frameset标签不能放在body标签中.
 <html>
	<head>
		<title>FrameTest2</title>
		<script language="javascript">
			leftState=0;
		</script>
	</head>
	<frameset rows="20%,*" cols="*" border="1">
		<frame name="top" scrolling="no" src="Top.html" noresize>
		<frameset name="bottom" cols="20%,*" rows="*"  border="1">
			<frame name="left" scrolling="yes" src="Left.html">
			<frame name="right" scrolling="yes" src="Right.html">
		</frameset>
	</frameset>
  </html>
  Top.html代码如下:
<html>
	<head>
		<title>Child</title>
		<script language="javascript">
			function operate(){
				if(parent.leftState==0){
					parent.leftState=1;
					parent.bottom.cols="*,100%";
				}else{
					parent.leftState=0;
					parent.bottom.cols="20%,*";
				}
				parent.bottom.location.reload();
			}
		</script>
	</head>
	<body>
		<input type="button" name="operate" value="change" onClick="operate()">
	</body>
  </html>
  Left.html代码如下:
  <html>
	<head>
		<title>Child</title>
	</head>
	<body>
		我是Left.
	</body>
  </html>
  Right.html代码如下:
   <html>
	<head>
		<title>Child</title>
	</head>
	<body>
		我是Right.
	</body>
  </html>
  通过上面的四个html文件我们的html框架就搭建好了,注意parent的意思是指父页面.
  访问FrameTest2.html文件,在top上面有一个change按钮,点击按钮,可以实现隐藏左边页面的功能,或者说是放大右边页面的功能.
  总之通过上面的小例子我们可以借助frame搭建一个很实用的html框架.抓紧时间试试吧!
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值