❗ 本文最后更新于 5923 天前，文中所描述的信息可能已发生改变，请谨慎使用。

以前在测试自己写的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>
  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”。

本文链接：https://imququ.com/post/go-back-in-browser.html，参与评论 »

--EOF--

发表于 2008-09-03 00:55:23，并被添加「Browser-History」标签。查看本文 Markdown 版本 »

本站使用「署名 4.0 国际」创作共享协议，相关说明 »