歷史總是很有趣，不是嗎？在舊版本的 HTML 中，我們對瀏覽器歷史記錄的控制有限。我們可以使用可用的方法來回移動，但僅此而已
通過 HTML5 History API，我們可以更好地控制瀏覽器歷史記錄。例如，我們有一種方法可以在歷史記錄中添加條目，或者在不刷新頁面的情況下更改地址欄中的 URL。
為什么使用歷史 API？
在本文中，我們將了解 HTML5 History API 的誕生原因。在這個 API 出現(xiàn)之前，我們經(jīng)常使用哈希值來更改頁面內(nèi)容，特別是對于重型單頁面應(yīng)用程序，因為如果不刷新頁面就無法更改 URL。此外，當您更改 URL 的哈希值時，不會對瀏覽器歷史記錄進行任何更改。
但是現(xiàn)在，這兩個功能都可以通過 HTML5 History API 實現(xiàn)，并且可以開發(fā)大量腳本的單頁應(yīng)用程序，而無需使用哈希值。它還允許我們以 SEO 友好的方式構(gòu)建應(yīng)用程序。此外，這項技術(shù)可以讓我們減少帶寬——但如何減少呢？
在本文中，我們將使用此 API 開發(fā)一個單頁應(yīng)用程序來準確演示這一點。
這意味著我們將在第一次頁面加載時加載所有必需的資源。從那時起，應(yīng)用程序?qū)H下載所需的內(nèi)容。換句話說，它不會一直加載所有資源，而是僅加載第二個內(nèi)容請求中所需的資源。
請注意，您需要執(zhí)行一些服務(wù)器端編碼以僅提供部分資源而不是整個頁面內(nèi)容。
瀏覽器支持
在撰寫本文時，瀏覽器對 HTML5 History API 的支持相當好，我們可以在此處查看其狀態(tài)。通過此鏈接，您可以了解受支持的瀏覽器，但在使用特定功能之前檢測對特定功能的支持始終是一個好習(xí)慣。
要以編程方式確定您的瀏覽器是否支持該 API，請查看以下代碼行：
return !!(window.history && history.pushState);
登錄后復(fù)制
此外，我建議您參考這篇文章來檢測對各種 HTML5 功能的支持。
如果您使用 Modernizr，那么您應(yīng)該使用以下代碼：
if (Modernizr.history) {
// History API Supported
}
登錄后復(fù)制
如果您的瀏覽器不支持歷史 API，那么您可以使用 history.js polyfill。
操縱歷史
HTML5提供了兩種新方法：
history.pushState()?
history.replaceState()
這兩者都允許我們分別添加和更新歷史狀態(tài)。兩者的工作方式相同，并且期望參數(shù)數(shù)量相同。除了這些方法之外，我們還有 popstate 事件。我們將在本文后面了解如何以及何時使用此 popstate 事件。
pushState 和 replaceState 都期望相同數(shù)量的參數(shù)，如下所示：
state?可以存儲 JSON 字符串，并且可用于 popstate 事件。
title?是一個目前被大多數(shù)瀏覽器忽略的參數(shù)，因此最好將其設(shè)置為?null。
url 可以代表任何網(wǎng)址。它將使用瀏覽器的地址進行更新，并且不會關(guān)心該 URL 是否存在。最重要的是，它不會重新加載您的網(wǎng)頁。
這些方法之間的主要區(qū)別是 pushState 將在歷史堆棧中添加一個新條目，而 replaceState 將替換當前的歷史值而不是添加新的值一。如果您仍然對這兩種方法感到困惑，那么讓我們用更好的示例來演示相同的情況。
假設(shè)我們有一堆標記為 1 和 2 的兩個方塊，而您手中有標記為 3 的方塊?，F(xiàn)在，當我們執(zhí)行pushState時，塊3將被添加到現(xiàn)有堆棧中，因此堆棧將有3個塊。
現(xiàn)在假設(shè)您手中有兩個塊和另一個塊的相同堆棧。當我們執(zhí)行replaceState時，它會從堆棧中取出塊2并放置塊3。因此歷史值的數(shù)量將保持不變。另一方面，pushState 會將歷史計數(shù)增加一。
下圖顯示了相同的演示。
到目前為止，我們已經(jīng)介紹了 pushState 和 replaceState 事件，以便控制瀏覽器歷史記錄，但假設(shè)我們有各種虛假歷史記錄在瀏覽器中總計。用戶可能會也可能不會重定向到該頁面。在這種情況下，當用戶點擊瀏覽器來回按鈕導(dǎo)航到歷史頁面時，就會出現(xiàn)問題。
雖然您可能期望在解決 pushState 或 replaceState 方法時觸發(fā) popstate ，但實際上，它是事實并非如此。相反，當您瀏覽會話歷史記錄條目時，通過點擊后退或前進按鈕或使用 history.go 或 history.back 方法。
在WebKit瀏覽器中，文檔的onload事件后會觸發(fā)popstate事件，但Firefox和IE沒有此行為。
演示
HTML
<div class="container">
<div class="row">
<ul class="nav navbar-nav">
<li><a href="home.html" class="historyAPI">Home</a></li>
<li><a href="about.html" class="historyAPI">About</a></li>
<li><a href="contact.html" class="historyAPI">Contact</a></li>
</ul>
</div>
<div class="row">
<div class="col-md-6">
<div class="well">
Click on Links above to see history API usage using <code>pushState</code> method.
</div>
</div>
<div class="row">
<div class="jumbotron" id="contentHolder">
<h1>Home!</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
</div>
登錄后復(fù)制
JavaScript
<script type="text/javascript">
jQuery('document').ready(function(){
jQuery('.historyAPI').on('click', function(e){
e.preventDefault();
var href = $(this).attr('href');
// Getting Content
getContent(href, true);
jQuery('.historyAPI').removeClass('active');
$(this).addClass('active');
});
});
// Adding popstate event listener to handle browser back button
window.addEventListener("popstate", function(e) {
// Get State value using e.state
getContent(location.pathname, false);
});
function getContent(url, addEntry) {
$.get(url)
.done(function( data ) {
// Updating Content on Page
$('#contentHolder').html(data);
if(addEntry == true) {
// Add History Entry using pushState
history.pushState(null, null, url);
}
});
}
</script>
登錄后復(fù)制
演示 1：HTML5 歷史記錄 API – PushState
在此演示中，您將體驗到瀏覽器中正在計算歷史記錄條目，并且您可以使用瀏覽器后退/前進按鈕瀏覽它。查看演示
演示 2：HTML5 歷史記錄 API – ReplaceState
在此演示中，您將體驗到歷史記錄條目正在瀏覽器中更新，并且您無法使用瀏覽器后退/前進按鈕進行導(dǎo)航。查看演示
結(jié)論
此 API 對我們的 Web 應(yīng)用程序的工作方式產(chǎn)生了巨大影響。它消除了對 URL 中哈希值的依賴，以便輕松創(chuàng)建高效、SEO 友好的單頁應(yīng)用程序。
這是一個非常好的 API，不是嗎？
以上就是HTML5 History API 簡介的詳細內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
