所谓隐藏帧,指的是将一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)连续播放背景音乐,而不会随着页面的更换而打断!