html如何动态改变框架的大小。

如何动态改变框架的大小

解决思路：

在框架所加载页中用parent.frames["框架名"].cols=”值1,值2…” 或者parent.frames["框架名"].rows=”值1,值2…”来动态设置框架大小。

具体步骤：

1．直接隐藏或显示。

(1).框架页代码。

或者

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

隐藏左框架

显示左框架

或者

隐藏上框架

显示上框架

2.匀速改变框架尺寸。

(1)框架页代码。

(2)demo.htm页代码。

//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()函数

}

}

隐藏左框架

显示左框架

代码运行效果：

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

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

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

(1)捕获iframe对象的三种方法演示。

show

show

show

hide

hide

hide

代码运行效果：

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

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

hide

show

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

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)

}

show

hide

代码运行效果：

图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 标签属性的值获取对象的集合。