浏览器后退不执行ajax,解决ajax无法后退问题实例

都知道ajax有一个明显的缺点就是与浏览器的history.back()与forward()不友好,不能前进与后退。

解决方法:

d98abb1e5639

window.history实例

在console里面打印出window.history的实例,可以查看相关对象的原型。

length:length为浏览记录队列长度,由于这个页面是新打开的,队列中只有当前页面链接相关信息,其值为1

state:

pushState:就是window.history.pushState();

replaceState:就是window.replaceState();

用法:

window.history.pushState({status: 0} ,'' ,'?data=1');

d98abb1e5639

改变后的浏览器地址

这里需要注意的是,如果实在本地运行的话,在ie和火狐上都是可以完美运行的,但是现在新版的谷歌会报错,这是因为谷歌的安全机制问题。如果代码放在服务器上的话应该是没有这个错误的。

d98abb1e5639

所以这里的解题思路:

1.每次手动点击左侧的菜单,我将Ajax地址的查询内容(?后面的)附在demo HTML页面地址后面,使用history.pushState塞到浏览器历史中。

2.浏览器的前进与后退,会触发window.onpopstate事件,通过绑定popstate事件,就可以根据当前URL地址中的查询内容让对应的菜单执行Ajax载入,实现Ajax的前进与后退效果。

3.页面首次载入的时候,如果没有查询地址、或查询地址不匹配,则使用第一个菜单的Ajax地址的查询内容,并使用history.replaceState更改当前的浏览器历史,然后触发Ajax操作。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值