导读:在做项目的过程中,发现网页的一些地方是不变的,比如说顶部、底部。而变幻的内容就只是一部分。这个时候在想,这是每次都刷新一个界面呢,还是有别的快捷方法呢。然后就找到了frameset 这个东西。本篇博客是结合一个小实例对frameset的简单介绍。
一、是什么
frameset 元素可定义一个框架集。它被用来组织多个窗口(框架)。每个框架存有独立的文档。在其最简单的应用中,frameset 元素仅仅会规定在框架集中存在多少列或多少行。
优点:
1,在frameset里使用iframe来实现常规的一些分栏布局,可以借助一个页面承载多个页面的方式来重用页面代码。
2,一个页面中的iframe之间可以互相实现关联,而且不需要依靠过多的js就可以实现类似“局部”刷新的机制。
缺点:
1,如果要实现不同iframe之间的dom元素产生互动和关联,需要的js复杂程度较高,而且有些根本实现不了(比如拖拽,比如用户自定制页面布局)。
2,一个页面承载多个页面的http请求,而且实现那种类似局部刷新的效果,不是后台运行请求的机制,而也是使用了前台的浏览器刷新机制,会有延迟的响应而且无法对响应进行控制(比如loading或者一些响应状态的监听)。
使用场景:
适用于有固定布局的系统
二、实例简介
2.1,上、下、左的布局
top:
<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>freamset——top</title> </head> <body> <div style="text-align:center;color:blue;font-size:50px">(这里是头部)牡丹亭</div> </body> </html> </span>
bottom:
<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>freamset——bottom</title> </head> <body> <div style="text-align:center;color:blue;font-size:30px">(底部) 《皂罗袍》 </div> </body> </html> </span>
left:
<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>freamset——left</title> </head> <body> <div style="color:blue;font-size:30px">(左边) </br> 《牡丹亭》 </br> 作者:汤显祖 </br> <a target="right" href="right.html">前两句</a> </br> <a target="right" href="myright.html">后两句</a> </div> </body> </html> </span>
2.2,center中的右面布局
<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>freamset——right</title> </head> <body> <div style="color:blue;font-size:30px">(右边前两句) </br> 原来姹紫嫣红开遍 </br> 似这般都付与断井颓垣 </div> </body> </html> </span>
<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>freamset——myright</title> </head> <body> <div style="color:blue;font-size:30px">(右边后两句) </br> 良辰美景奈何天 </br> 赏心乐事谁家院 </div> </body> </html> </span>
2.3,混合的frameset布局
<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>freamset——index</title> <frameset rows="15%,80%,5%"> <frame name="top" src="top.html" /><--拥有15%的高度--> <frameset cols="25%,75%"><--拥有80%的高度--> <frame name="left" src="left.html"><--拥有25%的宽度--> <frame name="right" src=""><--拥有75%的宽度--> </frameset> <frame name="bottom" src="bottom.html" /><--拥有5%的高度--> </frameset> </html> </span>
2.4,效果
三、总结
利用frameset标签可以设置一个固定的网站布局,但是在HTML5中,已经不支持这个属性了。那么我想肯定有一种可以替代的东西。接下来,还需要了解一些别的相关的东西,比如IFrame等。