不同浏览器处理后退的一些异同

In: 前端开发

3 09 2008

以前在测试自己写的webim时发现firefox有一个很人性化的特性:在页面上跟别人聊天的时候如果不小心点到了本页打开的链接,只要点一下Firefox的后退按钮,就会退后到之前的页面,可以接着聊。也就是说在firefox中点击后退,原来页面的状态会还原,包括JS改变的DOM结构也会保持。

我们用下面的代码来测试一些常见的浏览器是怎么处理后退的。测试的浏览器有IE8beta2、Firefox3.0.1、Flock1.2.4(Firefox2.0.0.16内核)、Safari3.1(window版)、Opera9.60。

<a href="http://www.baidu.com">百度</a>
<div id="a1"></div>
<script type="text/javascript">
  window.onload = function(){
    alert("load");
    var i = 1;
    setInterval(function(){
      document.getElementById("a1").innerHTML = i++;
    },500);
  };
</script>

测试结果:IE8点后退时会触发之前页面的window.onload事件,计数器回到初始状态重新计数;Opera9.6后退时不会触发前一个页面的window.onload事件,但定时器停止运行;其它浏览器后退时都不会触发前一个页面的window.onload事件,定时器会接着之前的状态继续计数。

结论:Firefox、Opera、Safari在这方面都做得比较人性化,完全的保留了页面unload时的状态,估计是直接从内存中读取缓存数据,所以后退速度相当快;其中Opera9.6会导致计数器停止,可能是个bug。IE在后退时则会回到最初状态,之前JS改变的DOM不复存在。

如果想让非IE浏览器退后时也能触发window.onload事件呢?这篇文章提到了解决方案。其实就是在页面是加入:

window.onunload = function(){};

经测试,此方法可行。对于其中的原理,JK给出了如下解释:

FF/Safari等会努力做得很理想(完完全全的保持上次的unload时的信息),不过,如果他认为用户的代码(典型的是在onunload里)会破坏他的理想计划时,他就退一步,把“后退”当作“后退+reload”。

再来看看这些吧

3 Responses to 不同浏览器处理后退的一些异同

Avatar

胡子

09月 3rd, 2008 at 3:26 pm

还有这区别啊,还真一直没有注意[:14]

Avatar

fanz

09月 3rd, 2008 at 4:38 pm

博主好:
最近在找修正ajax后退按钮失效的方法,请问有实际项目的例子吗?最好是PHP的!
还有请问PHP版QGYWEBIM源码有提供下载了吗?期待中…
祝天天好心情!
[:30](email写#163了竟然不给发表而且资料全没了)

Avatar

admin

09月 3rd, 2008 at 10:22 pm

ajax后退失效的问题用JS就能解决,跟平台语言无关。有空我放一段代码上来。PHP版QGYWEBIM还有一些小问题要修一下,应该很快就会给出下载地址的。

Comment Form

关于我

JerryQu,当前从事前端开发,@中国北京
这里是我随便记录东西的地方~
需要找我,我的联系方式在这里 »
查找QGYWebim相关信息,请点这里 »

  • 来无影: 这个站的模板不错,我很喜欢![:13 [...]
  • 莞尔: 我用了你的表情插件发现一个问题 那就是路径问题 我的WP没有放在根目录 [...]
  • samuel: 很棒。你自己写的demo,比去看jquery代码简单多了 [...]
  • samuel: 非常棒,很有参考价值。比去看jQuery代码舒服多了 [...]
  • 风剪云: 向你学习了。BS无德之人,拿去用也罢了。居然还拿去赚钱。[:11 [...]
  • nvshao: [:20]不错不 [...]
  • 团伙创意: bu cuo 不错 学习啦~ [...]
  • 3g培训: 再来看看。上班没事干。还是希望看到新文 [...]

共享