你的位置:首页 > Java教程

[Java教程]HTML5 History API 实现无刷新跳转


 在HTML5中

  1. 新增了通过JS在浏览器历史记录中添加项目的功能。

      2. 在不刷新页面的前提下显示改变浏览器地址栏中的URL。

      3. 添加了当用户单击浏览器的后退按钮时触发的事件。

 通过以上三点,可以实现在不刷新页面的前提下动态改变浏览器地址栏中的URL,动态显示页面内容。

 比如: 当页面A和页面B内容不一样的时候,在HTML5之前,如果从页面A切换到页面B时,需要在浏览器下从页面A切换到页面B,或者说,如果需要有后退按钮功 能的话,可以在URL地址加#XXXX 可以实现后退功能。那么现在在HTML5中,可以通过History API实现如下处理即可:

  1. 在A页面 通过发AJAX请求 请求页面中的B数据。

  2. 在页面A中通过JS装载相应的信息到相应的位置来。

  3. 通过History API在不刷新页面的情况下在浏览器的地址栏中从页面A的URL地址切换到页面B的URL地址。  

HTML4中的History API

属性

  1. length 历史的项数。javascript 所能管到的历史被限制在用浏览器的“前进”“后退”键可以去到的范围。本属性返回的是“前进”和“后退”两个按键之下包含的地址数的和。

方法

  1. back() 后退,跟按下“后退”键是等效的。
  2. forward() 前进,跟按下“前进”键是等效的。
  3. go() 用法:history.go(x);在历史的范围内去到指定的一个地址。如果 x < 0,则后退 x 个地址,如果 x > 0,则前进 x 个地址,如果 x == 0,则刷新现在打开的网页。history.go(0) 跟 location.reload() 是等效的。

HTML5中的History API

  1. history.pushState(data, title [, url]):往历史记录堆栈顶部添加一条记录;data会在onpopstate事件触发时作为参数传递过去;title为页面标题,当前所有浏览器都会 忽略此参数;url为页面地址,可选,缺省为当前页地址。

  2. history.replaceState(data, title [, url]) :更改当前的历史记录,参数同上。

  3. history.state:用于存储以上方法的data数据,不同浏览器的读写权限不一样。

  4. popstate事件:当用户单击浏览器的后退或者前进按钮时触发该事件。在事件处理函数中读取触发事件的事件对象的state属性值,该属性值即为执行pushState方法时所使用的第一个参数值,其中保存了在向浏览器历史记录中添加记录同步保存的对象。

 到目前为止,IE10,firefox4以上的版本,Chrome8以上的版本,Safari5,Opera11以上的版本浏览器支持HTML5中的History API。

HTML:

 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4  <title> New Document </title> 5  <style> 6   ul,li{list-style:none;} 7   .container{width:600px;border:1px solid #ccc;overflow:hidden;} 8   .container ul{float:left;width:102px;} 9   .container li{width:100px;height:22px;line-height:22px;overflow:hidden;}10   .container li a{text-decoration:none;}11   .container li.current a{color:red;}12   .all-content{width:400px;float:left;overflow:hidden;}13  </style>14  <script src="jquery-1.10.2.min.js"></script>15  <script src="index.js"></script>16 </head>17 18 <body>19   <div class="container">20     <ul class="list">21       <li>22         <a href="http://localhost/html5/index.php">测试1</a>23       </li>24       <li>25         <a href="http://localhost/html5/index2.php">测试2</a>26       </li>27       <li>28         <a href="http://localhost/html5/index3.php">测试3</a>29       </li>30     </ul>31 32     <div class="all-content">33       <ul class="content">34         <li>111</li>35         <li>222</li>36         <li>333</li>37       </ul>38     </div>39   </div>40 </body>41 </html>

View Code

JS:

 1 /** 2  * HTML5 history and ajax 3 */ 4  5 $(function(){ 6   var ajax, 7     currentState; 8   $('.container li').unbind().bind('click',function(e){ 9     10     e.preventDefault();11     var target = e.target,12       url = $(target).attr('href');13     !$(this).hasClass('current') && $(this).addClass('current').siblings().removeClass("current");14     if(ajax == undefined) {15       currentState = {16         url: document.location.href,17         title: document.title,18         html: $('.content').html()19       };20     }21     ajax = $.ajax({22         type:'POST',23         url: url,24         dataType:'json',25         success: function(data){26           var html = '';27           if(data.length > 0) {28             for(var i = 0, ilist = data.length; i < ilist; i++) {29               html += '<li>' +data[i].age+ '</li>' + 30                   '<li>' +data[i].name+ '</li>' +31                   '<li>' +data[i].sex+ '</li>';32             }33             $('.content').html(html);34           }35           var state = {36             url: url,37             title: document.title,38             html: $('.content').html()39           };40           history.pushState(state,null,url);41         }42     });43     44   });45 46   window.addEventListener('popstate',function(event){47     if(ajax == null){48         return;49       }else if(event && event.state){50         document.title = event.state.title;51         $('.content').html(event.state.html);52       }else{53         document.title = currentState.title;54         $('.content').html(currentState.html);55       }56   });57 });

View Code

转至:http://www.alixixi.com/web/a/2014032492869.shtml