如何动态改变框架的大小

如何动态改变框架的大小
解决思路：
在框架所加载页中用parent.frames["框架名"].cols="值1,值2..." 或者parent.frames["框架名"].rows="值1,值2..."来动态设置框架大小。
具体步骤：
1．直接隐藏或显示。
(1).框架页代码。

<frameset cols="100,*" name="frame1">
<frame src="about:blank">
<frame src="demo.htm">
</frameset>

或者

<frameset rows="100,*" name="frame1">
<frame src="about:blank">
<frame src="demo.htm">           
</frameset>

(2).demo.htm页的代码。

<button onClick="parent.frames[’frame1’].cols=’0,*’">隐藏左框架</button>
<button onClick="parent.frames[’frame1’].cols=’100,*’">显示左框架</button>

或者

<button onClick="parent.frames[’frame1’].rows=’0,*’">隐藏上框架</button>
<button onClick="parent.frames[’frame1’].rows=’100,*’">显示上框架</button>

2.匀速改变框架尺寸。
(1)框架页代码。

<frameset cols="100,*" name="frame1">
<frame src="about:blank">
<frame src="demo.htm">
</frameset>

(2)demo.htm页代码。

<script>
//step为框架尺寸改变的速度步长
//flag为判断当前状态是显示(1)还是隐藏(-1)
var obj,w,step=3,flag=-1        
function showHideFrame(b){
    obj=parent.frames[’frame1’]     //目标框架对象
    w=parseInt(obj.cols.split(",")[0])     
/*目标框架对象的当前宽度，本例中obj.cols取得的值为"100,*"(显示状态时为"0,*")，obj.cols.split(",")把obj.cols以","为标志分组，得到数组["100","*"]，obj.cols.split(",")[0]取到数组的第一个元素100，然后用parseInt(obj.cols.split(",")[0])转化为整数*/
    flag=b               //根据参数值b，设置显示隐藏状态
    resize()             //调用resize()函数
}
function resize(){
//调整目标框架对象宽度值，如果flag为1即显示框架时w不断变大，
//反之不断变小
    w+=step*flag
    if((flag==-1&&w>0)||(flag==1&&w<100)){
//隐藏状态并且w大于0或者显示状态并且w<100，执行下面的代码
       obj.cols=w+",*"              //重设框架宽度
        setTimeout("resize()",10) //10毫秒后再次执行resize()函数
    }
}
</script>
<button onClick="showHideFrame(-1)">隐藏左框架</button>
<button onClick="showHideFrame(1)">显示左框架</button>

代码运行效果：

图1.6.1 第3步的代码运行效果

图1.6.2 单击【隐藏左框架】时的效果(左框架正在缩小)

3.对于内嵌浮动框架iframe，它的属性必须使用前缀 document.all ，或者以document.getElementsByName("框架名")和document.getElementById("框架名")这三种方式访问。
(1)捕获iframe对象的三种方法演示。

 <iframe name="demo" src="about:blank" width="300"></iframe><br>
<button onClick="document.all.demo.style.display=’inline’">
show</button>
<button onClick="document.getElementsByName(’demo’)[0].style.display=’inline’">show</button>
<button onClick="document.getElementById(’demo’).style.display=’inline’">show</button>

<button onClick="document.all.demo.style.display=’none’">hide</button>
<button onClick="document.getElementsByName(’demo’)[0].style.display=’none’">hide</button>
<button onClick="document.getElementById(’demo’).style.display=’none’">hide</button>

代码运行效果：

图1.6.3捕获iframe对象的三种方法演示

(2)或者把它放到一个元素中，然后控制该元素的显示或隐藏。

<span id="demo"><iframe src="index.asp" name="frame1">
</iframe></span><br>
<button onClick="demo.style.display=’none’">hide</button>
<button onClick="demo.style.display=’inline’">show</button>

(3)通过设置CSS属性clip，实现的匀速显示与隐藏效果。

<script>
var step=0
function resize(flag){
  step+=5*flag
  document.all.demo.style.clip="rect(0 "+step+"% "+step+"% 0)"
  if(flag==1)
     if(step<100) setTimeout("resize(1)",10)
  if(flag==-1)
     if(step>0) setTimeout("resize(-1)",10)
}
</script>
<button onClick="resize(1)">show</button>
<button onClick="resize(-1)">hide</button><br>
<iframe name="demo" style="position:absolute"></iframe>

代码运行效果：

图1.6.4 iframe的匀速显示与隐藏演示

图1.6.5 单击【hide】按钮时的效果

注意：使用脚本控制iframe的clip属性前必须要设置iframe的position属性为absolute。
试一试：读者可以试着用iframe的width和height属性控制它的隐藏与显示。
特别提示
1.第3步的代码运行效果如图1.6.1所示，图1.6.2为单击【隐藏左框架】时的效果(左框架正在缩小)。
2.三种捕获iframe对象的方法演示效果见图1.6.3。
3.图1.6.4为第4步中(3)的代码运行效果，单击图1.6.4中的 【hide】 按钮后iframe逐渐被全部剪切，效果如图1.6.5所示。

特别说明

本例所涉及的知识点比较多，归纳起来主要是frameset的cols和rows属性获取、iframe对象的捕获和clip属性的应用。
document.all 返回对象所包含的元素集合的引用。
document.frames(parent.frames,top.frames) 获取给定文档定义或与给定窗口关联的文档定义的所有 window 对象的集合。
document.getElementById 获取对 ID 标签属性为指定值的第一个对象的引用。 
document.getElementsByName 根据 NAME 标签属性的值获取对象的集合。