html5 history.pushState+ajax 实现无刷新，浏览器地址栏title修改
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html5 history.pushState+ajax 实现无刷新，浏览器地址栏title修改相关的知识，希望对你有一定的参考价值。
1 <html> 2 <body> 3 <script> 4 var total=""; 5 for (var i=0;i<1000000;i++) 6 { 7 total= total+i.toString (); 8 history.pushState (0,0,total); 9 } 10 </script> 11 </body> 12 </html>
最近几天一直在说那个把ipone搞关机的js代码，其中有一行就是history.pushState,我认为我out了，虽然说是写后端的，但这个API早就出来了，我一直没听过，真实惭愧啊，于是赶紧学习了一下。
以前的history 就知道history.back(),history.go(-1)这几个历史命令。当时还以为html5把这两个方法更新了。看了才发现，是一个新的功能:可以用js添加历史功能了。想着这个功能的各种使用场景，偶然在百度上看到这个能修改浏览器地址栏，不由得来了精神。期待好久了。于是赶紧尝试一下。代码如下，一个简单的本地测试。
1 <!doctype> 2 <html> 3 <head> 4 <title>凤凰网-娱乐</title> 5 <script src="http://s0.ifengimg.com/static/js/jquery-1.7.2.min_c4de8813.js"></script> 6 </head> 7 <body> 8 <button id="yule">娱乐</button> 9 <button id="caijing">财经</button> 10 <button id="xinwen">新闻</button> 11 <button id="fangchan">房产</button> 12 </body> 13 </html> 14 <script> 15 $(‘button‘).click(function(event) { 16 /* Act on the event */ 17 //var link = window.location.href.split(‘?‘);//获取当前页面的链接 18 19 //console.log(link); 20 21 var title = ‘凤凰网-‘+$(this).text(); 22 var newlink = ‘http://localhost/‘+$(this).attr(‘id‘)+‘.html‘; 23 console.log(newlink); 24 console.log(title); 25 26 //ajax业务处理 将页面内容替换 27 28 #some code... 29 history.pushState({‘title‘:title},title,newlink);//修改地址 30 document.title = title;//修改地址 31 });
以上是关于html5 history.pushState+ajax 实现无刷新，浏览器地址栏title修改的主要内容，如果未能解决你的问题，请参考以下文章
ajax与HTML5 history pushState/replaceState实例
使用ajax和history.pushState无刷新改变页面URL
ajax与HTML5 history pushState/replaceState实例
HTML5历史状态管理history API-pushState/replaceState与popstate事件