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去,这样才可以在维系历史控制。

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值