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

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

2014-04-17 23:40 459 查看
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框架.抓紧时间试试吧!
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航