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

来源：互联网发布：淘宝加盟商靠谱吗编辑：程序博客网时间：2024/06/08 02:32

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