你的位置:首页 > 软件开发 > 网页设计 > pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新

pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新

发布时间:2016-11-10 12:00:12
使用Ajax可以异步获取数据,可以更高效地渲染页面。但也存在这一些问题:再刷新页面,页面就会变成初始的状态浏览器的前进后退功能无效对搜索引擎的爬虫抓取不友好 1、早前会使用浏览器的 hash锚点 来解决不同的hash标记着页面不同的部分,能修正页面刷新数据不正确的问题 ...

使用Ajax可以异步获取数据,可以更高效地渲染页面。

但也存在这一些问题:

再刷新页面,页面就会变成初始的状态

浏览器的前进后退功能无效

对搜索引擎的爬虫抓取不友好

 1、

早前会使用浏览器的 hash锚点 来解决

不同的hash标记着页面不同的部分,能修正页面刷新数据不正确的问题

再通过 onhashchange 事件监听hash锚点的变化,手动进行前进后退操作,浏览器支持度

ChromeFireFoxIEOperaSafari
5.03.6(1.9.2)8.010.65.0

 2、

随后出现一种 hashbang 的技术,即在url后加上标记 #!/myPath 来解决上述的问题

通过一个路径定义一个页面部分,在单页面应用中可常见到(Angular中已经封装了)。但好像只有google真正支持了对该路径的爬取

3、

HTML5的新特性做了助力,通过pushStatereplaceState 这两个新的history方法和 onpopstate 这个window事件,解决了上述三个问题

当然,也因为是HTML5的新特性,在旧版本浏览器上支持度不好的,建议是再用hashbang的方法来兼容

 

本文主要讲讲pushState这几个新东西

文字太枯燥了,先看看图示直接点感受

pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新

这个栗子目的是:初始值为0,通过异步请求自增值,可以前进或后退以及刷新,新打开一个url后也能获取相应的数据

 

history.pushState(state, title, url)history.replaceState(state, title, url)

原标题:pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新

关键词:ajax

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。