如何动态改变框架的大小[转]
2011-11-12 23:27
399 查看
如何动态改变框架的大小
解决思路:
在框架所加载页中用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所示。
document.all 返回对象所包含的元素集合的引用。
document.frames(parent.frames,top.frames) 获取给定文档定义或与给定窗口关联的文档定义的所有 window 对象的集合。
document.getElementById 获取对 ID 标签属性为指定值的第一个对象的引用。
document.getElementsByName 根据 NAME 标签属性的值获取对象的集合。
解决思路:
在框架所加载页中用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 标签属性的值获取对象的集合。
相关文章推荐
- 如何动态改变框架的大小
- 求助!如何在动态改变大小的Image上画图!
- 【远程调用框架】如何实现一个简单的RPC框架(三)优化一:利用动态代理改变用户服务调用方式
- 模仿iframe框架,由分隔栏动态改变左右两侧div大小———基于jQuery
- 如何使框架(Frame)大小无法改变
- javascript 动态改变框架frame,iframe的大小
- 如何让CControlBar派生类显示出来,并能动态改变大小
- Java 如何动态改变改变组件大小(更随窗口) 和 根据窗口大小改变程序窗口大小f
- 如何动态改变Frame的大小?
- 如何动态改变ImageView大小 -- 方案之二
- 如何才能让CDialog可以动态改变大小
- MFC笔记:如何移动控件位置,改变控件大小等
- MFC编辑框如何改变字体的大小
- 关于如何在.net程序中动态改变界面文化的一些链接
- java 如何让程序窗口随屏幕大小改变
- 使用addView方法时,如何保持已有动态控件位置不被改变
- 如何动态改变对话框的菜单。。。
- Loader动态添加多个图片并改变其大小 Flash3.0
- javascript动态的改变页面的字体大小
- .net如何改变上传文件大小