这个标题有些绕口，鄙人愚笨，实在找不到一个比较准确的说法，总之就是：
一个页面内显示多个iframe，一个变宽，另一个就变窄，一个变高，另一个就变矮的这种可自由伸缩的效果。它们之间有一个可多拽的分隔条。
我们公司的电算化考试平台需要这样的效果。最开始用的frameset，框架集，但有些问题，比如分隔条的样式不好自己设计，frameset页面不支持执行javascript。
后来我对其进行了改进，将frameset改为使用iframe，通过自己实现分隔条和拖拽效果来满足功能。
效果图：
可以点击分隔条折叠，也可以拖动分隔条调整各区域大小。
上图中，main.html页面按左右分隔嵌入了一个left.html和一个right.html
right.html里又按上下分隔嵌入了right_top.html和right_bottom.html
由于left.html、right_top.html、right_bottom.html是具体内容页面，此处不贴出代码，只贴出main.html和right.html的代码。
main.html代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" >
6 <meta name="renderer" content="webkit">
7 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
8 <style type="text/css">
9 *{padding:0px;margin:0px;}
10 html,body{width:100%;height:100%;}
11 </style>
12 <title>会计电算化专业技能考试系统</title>
13 <script type="text/javascript">
14 /***
15 *
16 * iframe横向分隔条拖拽伸缩实例 陈建宇 2016-6-14
17 *
18 ***/
19 function init(){
20
21 var li = $("#li");//left iframe
22 var ri = $("#ri");//right iframe
23 var s = $("#s");//中间分割条
24 var img = s.children("img").eq(0);
25 var drag = $("#drag");//分隔条中的拖拽层.
26
27 var clientWidth = $(window).width();
28 var li_init_width=270;//上边iframe要显示的宽度,若需要调整默认宽度,请改此值即可.
29 var s_init_width=10;//分隔条宽度默认值
30 var ri_width=clientWidth-li_init_width-s_init_width;//底部iframe要显示的宽度
31
32 //初始化
33 li.css("width",li_init_width+"px");
34 ri.css("width",ri_width+"px");
35 s.css("left",li_init_width+"px").css("width",s_init_width+"px");
36 img.css("width",s_init_width+"px").css("box-shadow","0 0 6px #666");
37
38 var is_drag = false;//是否点住并进行了拖拽
39
40
41 /***
42 * 分隔条事件处理,如果用户执行了mousedown,mousemove,mouseup说明是拖拽,
43 * 如果只执行了mousedown,mouseup说明是点击.
44 */
45
46
47 drag.unbind("mousedown").mousedown(function () {
48 //获得分隔条内拖拽层离顶边的距离
49 var li_width = parseInt(li.css("width"));
50 var ri_width = parseInt(ri.css("width"));
51
52 //分隔条div宽度设为100%,撑满屏,只有这样才能在拖拽分隔条时,有效的控制mouseup事件.
53 s.css("width","100%").css("left","0px");
54 img.css("left",li_width);
55
56 var start_x = event.clientX;
57
58 drag.unbind("mousemove").mousemove(function (event) {
59 is_drag = true;
60 var current_x = event.clientX;
61 var cha = current_x - start_x;//算偏移差量
62
63 li.css("width",(li_width+cha)+"px");
64 ri.css("width",(ri_width-cha)+"px");
65 img.css("left",(li_width+cha)+"px");
66
67
68
69 });
70
71 drag.unbind("mouseup").mouseup(function (event) {
72 var left = parseInt(img.css("left"));
73 s.css("width",s_init_width+"px").css("left",left+"px");
74 img.css("left","0px");
75
76 //处理非拖拽的click情况
77 if(!is_drag){
78
79 //直接设定固定值
80 var src=img.attr("src");
81 if(src.indexOf("toleft")!=-1){
82 li.css("width","0px");
83 s.css("left","0px");
84 clientWidth = $(window).width();
85 ri.css("width",(clientWidth-s_init_width)+"px");
86 img.attr("src",src.replace("toleft","toright"));
87 }else{
88 li.css("width",li_init_width+"px");
89 s.css("left",li_init_width+"px");
90 clientWidth = $(window).width();
91 ri.css("width",(clientWidth-li_init_width-s_init_width)+"px");
92 img.attr("src",src.replace("toright","toleft"));
93 }
94
95 }
96
97 drag.unbind("mousemove");
98 is_drag = false;
99
100
101
102 });
103
104
105
106 });
107
108
109 //当窗口大小发生改变时,重新渲染页面,以使各组件自适应高宽度.
110 $(window).resize(function() {
111 //顶部iframe保持高度不变,改变底部iframe高度
112 var clientWidth = $(window).width();
113 var li_width = parseInt(li.css("width"));
114 var new_ri_width = clientWidth - li_width - s_init_width;
115 ri.css("width",new_ri_width+"px");
116
117 });
118
119 }
120
121
122
123 /***
124 * 加载左边页面方法 陈建宇 2016-6-21
125 * 当右边页面先加载完后再加载左边页面,因为左边页面需要控制右边页面里的iframe
126 * 如果右边页面还没加载完,则会出错,左边页面也会加载失败.
127 */
128 function loadLeft(){
129 $("#li").attr("src","exam/left.html");
130 }
131
132
133 $(document).ready(function(){
134
135 init();
136
137 });
138
139 </script>
140
141
142 </head>
143 <body scroll="no">
144 <iframe id="li" name="left" src="left.html" frameborder="0" style="height:100%;border:none;position:absolute;left:0px;top:0px;z-index:1;"></iframe>
145 <div id="s" style="height:100%;position:absolute;z-index:3;cursor:move;">
146 <img style="height:100%;position:absolute;z-index:1;" src="data:images/toleft.png"/>
147 <div style="height:100%;width:100%;position:absolute;z-index:2;margin-left:0px;margin-top:0px;padding:0px;filter:alpha(opacity=0);opacity:0;background-color:#fee;" id="drag"></div>
148 </div>
149 <iframe id="ri" name="right" src="right.html" frameborder="0" style="height:100%;border:none;position:absolute;top:0px;right:0px;z-index:2;"></iframe>
150
151
152 </body>
153
154 </html>
right.html代码：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
3 <html>
4 <head>
5 <title>iframe纵向分隔条拖拽伸缩</title>
6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
7 <style type="text/css">
8 *{padding:0px;margin:0px;}
9 html,body{width:100%;height:100%;}
10 </style>
11 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
12 <script type="text/javascript">
13
14 /***
15 *
16 * iframe纵向分隔条拖拽伸缩 陈建宇 2016-6-14
17 *
18 ***/
19
20 function init(){
21
22 var ti = $("#ti");//top iframe
23 var bi = $("#bi");//bottom iframe
24 var s = $("#s");//中间分割条
25 var img = s.children("img").eq(0);
26 var drag = $("#drag");//分隔条中的拖拽层.
27
28 var clientHeight = $(window).height();
29 var ti_init_height=160;//上边iframe要显示的高度,若需要调整默认高度,请改此值即可.
30 var s_init_height=10;//分隔条高度默认值
31 var bi_height=clientHeight-ti_init_height-s_init_height;//底部iframe要显示的高度
32
33 //初始化
34 ti.css("height",ti_init_height+"px");
35 bi.css("height",bi_height+"px");
36 s.css("top",ti_init_height+"px").css("height",s_init_height+"px");
37 img.css("height",s_init_height+"px").css("box-shadow","0 0 6px #666");
38
39 var is_drag = false;//是否点住并进行了拖拽
40
41
42 /***
43 * 分隔条事件处理,如果用户执行了mousedown,mousemove,mouseup说明是拖拽,
44 * 如果只执行了mousedown,mouseup说明是点击.
45 */
46
47
48 drag.unbind("mousedown").mousedown(function () {
49 //获得分隔条内拖拽层离顶边的距离
50 var ti_height = parseInt(ti.css("height"));
51 var bi_height = parseInt(bi.css("height"));
52
53 //分隔条div高度设为100%,撑满屏,只有这样才能在拖拽分隔条时,有效的控制mouseup事件.
54 s.css("height","100%").css("top","0px");
55 img.css("top",ti_height);
56
57 var start_y = event.clientY;
58
59 drag.unbind("mousemove").mousemove(function (event) {
60 is_drag = true;
61
62 var current_y = event.clientY;
63 var cha = current_y - start_y;//算偏移差量
64
65 ti.css("height",(ti_height+cha)+"px");
66 bi.css("height",(bi_height-cha)+"px");
67 img.css("top",(ti_height+cha)+"px");
68
69
70
71 });
72
73 drag.unbind("mouseup").mouseup(function (event) {
74 var top = parseInt(img.css("top"));
75 s.css("height",s_init_height+"px").css("top",top+"px");
76 img.css("top","0px");
77
78 //处理非拖拽的click情况
79 if(!is_drag){
80
81 //直接设定固定值
82 var src=img.attr("src");
83 if(src.indexOf("totop")!=-1){
84 ti.css("height","0px");
85 s.css("top","0px");
86 clientHeight = $(window).height();
87 bi.css("height",(clientHeight-s_init_height)+"px");
88 img.attr("src",src.replace("totop","tobottom"));
89 }else{
90 ti.css("height",ti_init_height+"px");
91 s.css("top",ti_init_height+"px");
92 clientHeight = $(window).height();
93 bi.css("height",(clientHeight-ti_init_height-s_init_height)+"px");
94 img.attr("src",src.replace("tobottom","totop"));
95 }
96
97 }
98
99 drag.unbind("mousemove");
100 is_drag = false;
101
102
103
104 });
105
106
107
108 });
109
110 //当窗口大小发生改变时,重新渲染页面,以使各组件自适应高宽度.
111 $(window).resize(function() {
112 //顶部iframe保持高度不变,改变底部iframe高度
113 var clientHeight = $(window).height();
114 var ti_height = parseInt(ti.css("height"));
115 var new_bi_height = clientHeight - ti_height - s_init_height;
116 bi.css("height",new_bi_height+"px");
117
118 });
119
120
121 }
122
123
124
125
126
127 $(document).ready(function(){
128 init();
129 parent.loadLeft();
130 });
131 </script>
132 </head>
133 <body scroll="no">
134 <iframe id="ti" name="top" src="right_top.html" frameborder="0" style="width:100%;border:none;position:absolute;top:0px;left:0px;z-index:1;"></iframe>
135 <div id="s" style="width:100%;position:absolute;z-index:3;cursor:move;">
136 <img style="width:100%;position:absolute;z-index:1;" src="data:images/totop.png"/>
137 <div style="width:100%;height:100%;position:absolute;z-index:2;margin-top:0px;margin-left:0px;padding:0px;filter:alpha(opacity=0);opacity:0;background-color:#fee;" id="drag"></div>
138 </div>
139 <iframe id="bi" name="bottom" src="right_bottom.html" frameborder="0" style="width:100%;border:none;position:absolute;bottom:0px;left:0px;z-index:2;"></iframe>
140
141 </body>
142 </html>
分隔条图片：
