HTML5學習筆記之History API

阿新 • • 發佈：2019-01-19

這系列文章主要是學習Html5相關的知識點，以學習API知識點為入口，由淺入深的引入例項，讓大家一步一步的體會"h5"能夠做什麼，以及在實際專案中如何去合理的運用達到使用自如，完美駕馭O(∩_∩)O~

一，開篇分析

好了，廢話不多說，直接進入今天的主題，今天主要講的是“History API”及在單頁應用中的作用，並且會引入一個實際的例子做為講解的原型範例，先來看看“History API”：

　　為了提高Web頁面的響應速度，越來越多的開發者開始採用單頁面結構（single-page application）的解決方案。所謂的單頁面結構就是指多個頁面間切換時，不重新整理當前整個頁面，更新頁面展示資料，並且相應地改變位址列中的url，以使使用者可以分享這個url。

　　如果你使用chrome或者firefox等瀏覽器訪問"github.com、plus.google.com"等網站時，細心的你會發現頁面之間的點選是通過ajax非同步請求的，

同時頁面的URL發生了了改變。並且能夠很好的支援瀏覽器前進和後退。是什麼有這麼強大的功能呢？恩，這就會說到今天的主角，HTML5裡引用了新的API：

“history.pushState”和“history.replaceState”，就是通過這個介面做到無重新整理改變頁面URL的。先來看看"history"介面的詳細方法：

interface History {
readonly attribute  
long length;
readonly attribute any state;
void go(optional long delta);
void back();
void forward();
void pushState(any data, DOMString title, optional DOMString? url = null);
void replaceState(any data, DOMString title, optional DOMString? url = null);
};
/* 何問起 hovertree.com */

（二），重點API說明

在這裡說明一點："window.history.replaceState"和"window.history.pushState"類似，不同之處在於replaceState不會在window.history裡新增歷史記錄點，其效果類似於window.location.replace(url)，都是不會在歷史記錄點裡新增一個記錄點的。當你為了響應使用者的某些操作，而要更新當前歷史記錄條目的狀態物件或URL時，使用replaceState()方法會特別合適。

（三），引入例項

　　今天說說單頁應用中我們通常會這樣做，有一個選單列表，點選相關選單項然後動態載入相關模組，所有方式都是基於非同步請求的，美中不足是，我們會發現位址列不會有任何變化，以及瀏覽器中的前進和後退操作也不會有任何響應，這對使用者不是很友好，所以為了解決這個問題“History”就有用武之地了，那麼如何做到的那？不急先看一下例子中的效果圖展示，然後一步步分析,如下所示：

以下是監測資料，相同的url再次重新整理不會重複請求。

我們梳理一下流程：

　　　　頁面首次載入，雖然我們訪問的URL是"http://localhost:8888/bbSPA.html"，但是，實際URL確是：

"http://localhost:8888/bbSPA.html#shanghai"，”history.replaceState“完成了初始化url切換工作，並且初始做了載入

"shanghai.data"的資料工作，滑鼠點選左邊的任意一個選單項，右側內容是Ajax載入，並且頁面的URL隨之發生改變，例如，點選北京。

此時，我們點選位址列的後退按鈕，又回到了上海，並且顯示內容。原理很簡單，就是通過監聽”window.onpopstate“，達到了自由切換的作用。

好了！其實很簡單大家也嘗試自己實踐一下，以下是完整程式碼：

　　（1），html部分程式碼　　

<body> 
<center>
<Strong>bbSPA測試頁面_何問起</strong>
</center>
<hr>
<ul 
id="list" 
style="float:left;
list-style:none;"
>
<li><a href="#beijing">北京</a></li>
<li><a href="#shanghai">上海</a></li>
<li><a href="#shenzhen">深圳</a></li>
<li><a href="#guangzhou">廣州</a></li>
<li><a href="#tianjin">天津</a></li>
</ul>
<div 
id="content-main" 
style="margin-left:50px;
float:left;
width:220px;
border:1px solid #ccc;
height:120px;
color:#ff3300;"
>
</div>
</body>

（2），Js部分程式碼

$(function(){
_init() ;
}) ;
var _history = [] ; // 記錄hash的活動資料容器
function _init(){
var root = $("#list") ;
var defaultHash = root.find("li a").eq(1).attr("href") ;
var currentHash = window.location.hash ;
_addToHistory(defaultHash,true) ;
if(currentHash && currentHash != defaultHash){
_showContent((currentHash.split("#")[1])) ;
}
else{
_showContent((defaultHash.split("#")[1])) ;
}
$("#list").on("click","a",function(e){
var action = ($(this).attr("href").split("#")[1]) ;
_showContent(action) ;
e.preventDefault() ;
}) ;
window.addEventListener("popstate",function(e){
if(e.state && e.state.hash){
var hash = e.state.hash ;
if(_history[1] && hash === _history[1].hash){//存在歷史記錄，證明是後退事件
_showContent(hash.split("#")[1].toLowerCase()) ;
}else{ // 其它認為是非法後退或者前進
return ;
}
}
else{
return ;
}
},false) ;
} ;
function _showContent(action){
var samePage = _history[0]["hash"] == "#" + action ;
if(samePage){ // 同頁面,則不重新載入 何問起
return ;
}
_loadContent(action + ".data").done(function(data){
_renderContent(data["content"]) ;
_addToHistory("#" + action,samePage) ;
}).fail(function(){
throw new Error("load content error !") ;
}) ; 
} ;
function _loadContent(url){
return $.ajax({
url : url ,
dataType : "json"
}) ;
} ;
function _renderContent(text){
$("#content-main").text(text) ;
} ;
function _addToHistory(hash,noState){
var obj = {
hash : hash
} ;
if(noState){
_history.shift(obj) ;
window.history.replaceState(obj,"",hash) ;
}
else{
window.history.pushState(obj,"",hash) ;
}
_history.unshift(obj) ;
} ;/* 何問起 hovertree.com */

（四），最後總結

　　（1），理解History Api的使用方式以及具體例項中使用的目的是為了解決哪些問題。

　　（2），兩個核心Api的不同之處在哪。

　　（3），測試本例子的注意事項如下。

　　測試需要搭建一個web伺服器，以http://host/的形式去訪問才能生效，如果你在本地測試以file://這樣的方式在瀏覽器開啟，就會出現如下的問題：

Uncaught SecurityError: A history state object with URL 'file:///C:/xxx/xxx/xxx/xxx.html' cannot be created in a document with origin 'null'.

　因為你要pushState的url與當前頁面的url必須是同源的，而file://形式開啟的頁面是沒有origin的，所以會報這個錯誤。

以上就是本文的全部內容了，希望大家能夠喜歡。

HTML5學習筆記之History API

HTML5學習筆記之History API

Kafka 學習筆記之 Consumer API

Java8學習筆記之Stream API

Android OpenGL ES學習筆記之常用API

ES學習筆記之--delete api的實現流程

ES學習筆記之health api的實現

HTML5學習筆記簡明版（2）：新元素之section,article,aside

kubernetes學習筆記之十二：資源指標API及自定義指標API

Springboot 學習筆記之 Day 5 如何加密，以及用Swagger2構建Restful API

Java8學習筆記之新日期API

SAS學習筆記之函數應用

c#學習筆記之Application.DoEvents應用

[C#學習筆記之異步編程模式2]BeginInvoke和EndInvoke方法 (轉載)

.NET學習筆記之ADO.NET

,NET學習筆記之ADO.NET

Metasploit學習筆記之——情報搜集

鋒利的JQuery學習筆記之JQuery

java入門學習筆記之1(類的定義，代碼的編譯執行)

python學習筆記之列表與元組

Scala 學習筆記之函數(1)

HTML5學習筆記之History API

相關推薦