码迷,mamicode.com
首页 > Web开发 > 详细

html5 history.pushState+ajax 实现无刷新,浏览器地址栏title修改

时间:2016-01-29 20:11:52      阅读:233      评论:0      收藏:0      [点我收藏+]

标签:

 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修改

标签:

原文地址:http://www.cnblogs.com/yanxhyxz/p/5169536.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!