如何做到仅仅刷新页面某一部分而不改变其他数据呢?最先被想到的可能是AJAX吧?可惜我们项目不允许使用AJAX呀,通常的做法有两个:frameset 和iframe。
frameset的使用应该是很广泛的,具有菜单栏的页面布局一般都是使用frameset来实现的。它将整个页面分成若干个独立的窗口(框架),每个框架都对应一个HTML页面,它具有窗口的所有性质,所谓对框架的引用也就是对window对象的引用。有了这个window对象,就可以很方便地对其中的页面进行操作,例如使用window.document对象向页面写入数据、使用 window.location属性来改变框架内的页面等。
那么,如何使用frameset来实现局部刷新呢?将想要局部刷新的页面child1.jsp加入到框架页面father.jsp中,并将child1.jsp所在的框架大小调整为占满整个窗口,在father.jsp中引入child2.jsp作为隐藏提交页面。father.jsp如下:
<frameset rows="*,0">
<framesrc="child1.jsp" name="frame1" />
<framesrc="child2.jsp" name="frame2" />
</frameset>
提交时将child1.jsp的form的target指向frame2,页面回刷时刷到child2.jsp上,在child2.jsp中通过js更改child1.jsp中内容,实现局部刷新。
关于不同层次间框架的互相引用:
1. 父框架到子框架的引用:window.frames["frameName"];
2. 子框架到父框架的引用:window.parent。如果当前框架已经是顶级框架,则此种写法找到的还是该框架本身。
3. 兄弟框架间的引用: window.parent.frames["frame2"];
其中,window还可以用self来代替,甚至可以省略。
如果想通过iframe来实现局部刷新,可以这么做:将想要局部刷新的内容写在一个jsp中,如child3.jsp,在不想刷新的页面father.jsp中通过<iframe src="child3.jsp"name="frame3"></iframe>引入。提交时,只提交child3.jsp,并且回刷时也刷在frame3中,father.jsp中的内容则不会改变。
当需要在father.jsp中操作child3.jsp中的内容时,可以用window.frame3.xxx;当需要在child3.jsp中操作father.jsp中的内容时,可以用window.parent.xxx。如调用father.jsp的test()方法,可以这么写:window.parent.test();。
关于frameset和iframe的比较:
1. frameset是固定格式的页面布局,即从上到下,从左到右;而iframe位置灵活,放哪都可以。
2. iframe所定义的窗口大小是固定的,所以如果内容过多,会在父页面中间出现滚动条,影响美观。
3. iframe的父页面刷新本身也会跟着刷新。其实frameset的父页面刷新,其中的框架也会刷新,只不过父页面刷新的机会比较少。
4. iframe只有IE和firefox支持。
因此,这两个方法没有谁好谁不好,适合需求才是最好的。