如何实现局部刷新

时间:2021-07-06 20:07:16
在开发项目过程中经常有这样的情况发生:对于一个jsp页面的某一部分,在做一些操作后需要刷新它,由于页面中其他数据没有保存,导致一些大的数据或者不易提交后台的数据会因刷新页面而丢失。

如何做到仅仅刷新页面某一部分而不改变其他数据呢?最先被想到的可能是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支持。

因此,这两个方法没有谁好谁不好,适合需求才是最好的。