ajax前进后退问题

随着ajax的“大爆炸”，跟web带来了活力，但也带来了一下新的问题，比如下面将要讨论的“浏览器前进后退”的问题，由于局部刷新，url不变，浏览器感知不到“变化”，无法使用前进后退按钮。

 

解决问题之前

     

浏览器是如何记录访问历史并实现前进与后退的？

 

通常我们看到的浏览器地址栏URL的变化会被浏览器记录下来，还有页面中iframe子页面的地址变化也也会被浏览器记录，

 

浏览器将访问记录保存起来，以便进行前进和后退。

 

例如在http://www.google.com.hk后跟上不同的参数(或者不同的锚点)，浏览器将会一一记录下来。

 

开始解决问题

 

知道了浏览器是如何记录访问历史的（URL的变化），那就可以解决ajax带来的不能前进后退的问题了，思路有二：

 

1.通过隐藏的iframe记录浏览历史来实现

 

   实现思路：

 

   在主页面中嵌入iframe,在每次触发ajax的请求的时候，将ajax请求的地址传递给iframe的子页面，此时浏览器将会

 

   记录下iframe子页面地址的变化，当触发浏览器的前进后退按钮时，iframe的子页面地址会变化，此时iframe的子页

 

   面中的js将会调用主页面中的相应js方法来调用对应的ajax请求。

 

 

 

2.通过URL中锚点或者参数的变化来实现

 

  gmail、twitter和pip.io均使用这种方式来解决ajax前进后退的问题

 

 

 

 

 

 

有一定经验的开发者都有过对于ajax前进后退历史控制的经历，也涌现了不少的框架，不过发现这些框架对于设置了document.domain的会抱拒绝访问，其原因是因为动态创建的iframe没有设置document.domain，所以不灵了。

但这不是我要说的，我要说的是，当用户直接修改地址栏的hash并敲击回车后，这时候你就会发现历史控制失灵了。

大家要弄清楚，对于页面中有iframe的情况，iframe地址的变化（注意，通过window.location.href = hash;）会被浏览器记录在案，如果每次都是变化的iframe的地址，那前进后退都会改变iframe的地址，而不影响主页面。所以对于手动改动了地址栏的hash，改动的是主页面的hash，但不是href，所以需要同步到iframe中的href去，这样才可以在维系历史控制。

具体代码就不详细列出了，大家注意到这点就行了。