Spiga

十分钟内学会:控制浏览器是否缓存网页状态

2009-10-09 14:59 by Cat Chen, 5090 visits, 收藏, 编辑

Question

在Firefox等浏览器中,如果你打开一个页面并进行若干操作,例如在文本框进行输入,甚至点击按钮进行Ajax操作更新页面局部,这些操作的结果都会被缓存下来。在你点击链接离开这个页面后,如果你通过后退按钮回到这个页面,你会发现它仍出于你离开时的状态,而非页面刚刚加载好后的初始状态。在一些情况下,这样的缓存方式是符合我们预期的;但在另外一些情况下,我们更希望页面恢复到初始状态,或者说让页面从零开始重新加载一边。我们如何才能让浏览器尊重我们的选择呢?

Answer

如果你只是希望页面不缓存加载后的变更,后退就恢复到最初加载的状态,你只需要一个空白的unload事件就可以了:

window.onunload = function(){};

其中的原理是,Firefox等浏览器会尝试通过“挂起(suspend)”的方式来缓存页面,使得后退能够恢复到页面之前被挂起那一刻的状态。然而如果unload事件有处理函数,浏览器就认为你可能已经对页面进行了析构处理,这时候页面已经不可能回到正常的交互状态,也就不能以挂起的方式来缓存页面。

如果我们希望允许浏览器挂起页面,同时又需要知道何时被挂起何时被恢复,那该怎么办呢?我们可以用window对象上的pageshow和pagehide事件。当页面被挂起并隐藏时,pagehide事件会被触发;当页面被恢复到挂起前状态并显示出来时,pageshow事件会被触发。Firefox从1.5开始就支持这两个事件,Safari最新的nightly build也支持这两个事件。

Add your comment

9 条回复

  1. #1楼 xland      2009-10-09 15:19
    技巧文章啊
    支持
     回复 引用 查看   
  2. #2楼 Ryan Gene      2009-10-09 16:24
    form有个属性控制的,可以Google一下
     回复 引用 查看   
  3. #3楼[楼主] Cat Chen      2009-10-09 17:43
    @Ryan Gene
    这不仅仅是form相关的,例如页面进行过几次Ajax请求,局部更新了几次,这些在页面挂起的时候都会保存下来。
     回复 引用 查看   
  4. #4楼 canbeing      2009-10-09 19:47
    小技巧,大作用
     回复 引用 查看   
  5. #5楼 飞林沙      2009-10-10 08:36
    ref:
    如果我们希望允许浏览器挂起页面,同时又需要知道何时被挂起何时被恢复,那该怎么办呢?我们可以用window对象上的pageshow和 pagehide事件。当页面被挂起并隐藏时,pagehide事件会被触发;当页面被恢复到挂起前状态并显示出来时,pageshow事件会被触发。
    ----------
    怎么用呢?没大懂
     回复 引用 查看   
  6. #6楼 飞林沙      2009-10-10 08:38
    window.pageshow=function{?}
    window.pagehide=function{?}
    我们又怎么样用这个对页面是否缓存进行控制呢?
     回复 引用 查看   
  7. #7楼 topcg      2009-10-10 10:54
    不错,不错
     回复 引用 查看   
  8. #8楼[楼主] Cat Chen      2009-10-10 11:16
    @飞林沙
    window.onpageshow和window.onpagehide。详细请参考Mozilla的说明:
    https://developer.mozilla.org/en/Using_Firefox_1.5_caching
     回复 引用 查看   
  9. #9楼 rice_stone[未注册用户]2009-10-13 09:10
    不错
     回复 引用