有一次在上**網的時候，發現登陸、注冊動畫效果非常華麗，但讓我感到震驚的是頁面竟能夠實現無刷新跳轉（已改版，觀看此效果可以猛擊此處：GitHub或閱FM），回顧了所學的前端知識，似乎沒有任何技術可以實現這一點，于是百度了一下，才發現這原來是使用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:
復制代碼代碼如下: !DOCTYPE HTML html head title New Document /title style ul,li{list-style:none;} .container{width:px;border:px solid #ccc;overflow:hidden;} .container ul{float:left;width:px;} .container li{width:px;height:px;line-height:px;overflow:hidden;} .container li a{text-decoration:none;} .container li.current a{color:red;} .all-content{width:px;float:left;overflow:hidden;} /style script src="jquery-...min.js" /script script src="index.js" /script /head body div ul li a href="http://localhost/html/index.php" 測試 /a /li li a href="http://localhost/html/index.php" 測試 /a /li li a href="http://localhost/html/index.php" 測試 /a /li /ul div ul li /li li /li li /li /ul /div /div /body /html /p p JS:
復制代碼代碼如下: /** * HTML history and ajax */ $(function(){ var ajax, currentState; $('.container li').unbind().bind('click',function(e){ e.preventDefault(); var target = e.target, url = $(target).attr('href'); !$(this).hasClass('current') $(this).addClass('current').siblings().removeClass("current"); if(ajax == undefined) { currentState = { url: document.location.href, title: document.title, html: $('.content').html() }; } ajax = $.ajax({ type:'POST', url: url, dataType:'json', success: function(data){ var html = ''; if(data.length ) { for(var i = , ilist = data.length; i ilist; i++) { html += ' li ' +data[i].age+ ' /li ' + ' li ' +data[i].name+ ' /li ' + ' li ' +data[i].sex+ ' /li } $('.content').html(html); } var state = { url: url, title: document.title, html: $('.content').html() }; history.pushState(state,null,url); } }); }); window.addEventListener('popstate',function(event){ if(ajax == null){ return; }else if(event event.state){ document.title = event.state.title; $('.content').html(event.state.html); }else{ document.title = currentState.title; $('.content').html(currentState.html); } }); }); html教程
