所谓隐藏帧,指的是将一frame或iframe设置大小为0,显示不出来,在界面上相当于只有一个页面。此时可利用隐藏的帧来做一些事情。可完成不刷新页面的情况下接收数据,因为刷新的是隐藏帧,而隐藏帧大小为0,不可见,故可认为当前页面没有刷新。
实现原理:
操作帧将数据传入给隐藏帧,隐藏帧执行后转入一新的页面,在此新的页面中执行onLoad()方法改变操作帧的数据,从而使得操作帧看起来在不刷新页面的情况下完成数据的更新。
实现:
1,定义frame
<frameset rows=”100%,0″ frameborder=”0″>
<frame name=”displayFrame” src=”display.htm” noresize=”noresize”>
<frame name=”hiddenFrame”? src=”about:blank” noresize=”noresize”>
</frameset>
frameset rows=”100%,0″ ,frameborder=”0″ 0指定隐藏帧大小为0,border为0指定帧集不显示边框,达到完全隐藏的效果。
2,在触发后执行(触发可以是输入完成之类)
var name= document.getElementById(“userName”).value;
top.frames["hiddenFrame"].location=”/manage/login.action?name=” + name;
//通过location就开始执行action,并且指定执行后返回的页面显示到隐藏帧中。
3,返回的页面在加载时改变操作帧的数据,使得操作帧在不刷新情况下获得数据。
window.onload=function(){
var data= document.getElementById( “msg” );
top.frames["displayFrame"].displayInfo(data.innerHTML)
//调用操作帧页面中的displayinfo来调整页面数据。
}
注:可看出上述采用的是url传参,即GET方法,而GET方法主要用来获得数据,故其参数的大小是有限制的,若想传大量参数,即想利用隐藏帧实现POST方法。方式如下:
目前的难点是将大量参数传到隐藏帧中去,但不通过url传参,实现方式:
1,3参见上的get
2.不是调用js方法进行location执行,而是正规的在form中提交!!!
<form method=”post” action=”/manage/login.action” target=”hiddenFrame”>
<input type = “test” name=”userName” />
<input type=”submit” value=”submit”/>
</form>
form的target属性用来在指定的位置跳转到新的URL,与<a/>中的target类似
这里就是在隐藏帧中跳转到指定的URL,完成了POST方法。 (get方法也可如此用)
注:(1)iframe也可如上用。
iframe,它是在HTML 4.0中引入的。iframe与帧基本是相同的,唯一的区别是iframe可以放在一个未设置帧集的HTML页面中,可以使页面中的任意部分成为一个帧。iframe技术可以在未预先设置帧集的页面中使用,能够更好地适应功能的逐渐添加。
(2)隐藏帧技术的缺点是若页面不存在不能得到错误信息,完全依赖于返回正确的页面,而用XmlHttp可以通过status来判断。
(3)隐藏帧的其它作用:
1)用户登录之后保存用户的信息,因为存在session的话session可能丢失,做一个临时存储区用
2)连续播放背景音乐,而不会随着页面的更换而打断!
上一篇: 例子