15
2020
02

需求:实现一个页面操作不会整页刷新的网站,并且能在浏览器的前进,后退时正确响应。给出你的技术实现方案?

用cookie或者localStorage来记录应用的状态即可,刷新页面时读取一下这个状态,然后发送相应ajax请求来改变页面即可


 


    HTML5里引用了新的API,就是history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的


 


 


    虽然ajax可以无刷新改变页面内容,但无法改变页面URL


 


    其次为了更好的可访问性,内容发生改变后,改变URL的hash。但是hash的方式不能很好的处理浏览器的前进、后退等问题


 


    有的浏览器引入了onhashchange的接口,不支持的浏览器只能定时去判断hash是否改变


 


    再有,ajax的使用对搜索引擎很不友好,往往蜘蛛爬到的区域是空的


 


    为了解决传统ajax带来的问题,HTML5里引入了新的API,即:history.pushState, history.replaceState


 


    可以通过pushState和replaceState接口操作浏览器历史,并且改变当前页面的URL。


 


    pushState是将指定的URL添加到浏览器历史里,replaceState是将指定的URL替换当前的URL。


 


    如何调用


 


    var state = {    title: title,    url: options.url,    otherkey: othervalue};window.history.pushState(state, document.title, url);


    state对象除了要title和url之外,也可以添加其他的数据,比如:还想将一些发送ajax的配置给保存起来。


 


    replaceState和pushState是相似的,不需要多做解释。


 


    如何响应浏览器的前进、后退操作


 


    window对象上提供了onpopstate事件,上面传递的state对象会成为event的子对象,这样就可以拿到存储的title和URL了。


 


    window.addEventListener(‘popstate’, function(e){ if (history.state){    var state = e.state; //do something(state.url, state.title); }}, false);


    这样就可以结合ajax和pushState完美的进行无刷新浏览了。


 


 


 


 

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。