HTML5 History API 簡介-魔扣目錄

歷史總是很有趣，不是嗎？在舊版本的 HTML 中，我們對瀏覽器歷史記錄的控制有限。我們可以使用可用的方法來回移動，但僅此而已

通過 HTML5 History API，我們可以更好地控制瀏覽器歷史記錄。例如，我們有一種方法可以在歷史記錄中添加條目，或者在不刷新頁面的情況下更改地址欄中的 URL。

為什么使用歷史 API？

在本文中，我們將了解 HTML5 History API 的誕生原因。在這個 API 出現之前，我們經常使用哈希值來更改頁面內容，特別是對于重型單頁面應用程序，因為如果不刷新頁面就無法更改 URL。此外，當您更改 URL 的哈希值時，不會對瀏覽器歷史記錄進行任何更改。

但是現在，這兩個功能都可以通過 HTML5 History API 實現，并且可以開發大量腳本的單頁應用程序，而無需使用哈希值。它還允許我們以 SEO 友好的方式構建應用程序。此外，這項技術可以讓我們減少帶寬——但如何減少呢？

在本文中，我們將使用此 API 開發一個單頁應用程序來準確演示這一點。

這意味著我們將在第一次頁面加載時加載所有必需的資源。從那時起，應用程序將僅下載所需的內容。換句話說，它不會一直加載所有資源，而是僅加載第二個內容請求中所需的資源。

請注意，您需要執行一些服務器端編碼以僅提供部分資源而不是整個頁面內容。

瀏覽器支持

在撰寫本文時，瀏覽器對 HTML5 History API 的支持相當好，我們可以在此處查看其狀態。通過此鏈接，您可以了解受支持的瀏覽器，但在使用特定功能之前檢測對特定功能的支持始終是一個好習慣。

要以編程方式確定您的瀏覽器是否支持該 API，請查看以下代碼行：

return !!(window.history && history.pushState);

登錄后復制

此外，我建議您參考這篇文章來檢測對各種 HTML5 功能的支持。

如果您使用 Modernizr，那么您應該使用以下代碼：

if (Modernizr.history) {
    // History API Supported 
}

登錄后復制

如果您的瀏覽器不支持歷史 API，那么您可以使用 history.js polyfill。

操縱歷史

HTML5提供了兩種新方法：

history.pushState()?
history.replaceState()

這兩者都允許我們分別添加和更新歷史狀態。兩者的工作方式相同，并且期望參數數量相同。除了這些方法之外，我們還有 popstate 事件。我們將在本文后面了解如何以及何時使用此 popstate 事件。

pushState 和 replaceState 都期望相同數量的參數，如下所示：

state?可以存儲 JSON 字符串，并且可用于 popstate 事件。

title?是一個目前被大多數瀏覽器忽略的參數，因此最好將其設置為?null。

url 可以代表任何網址。它將使用瀏覽器的地址進行更新，并且不會關心該 URL 是否存在。最重要的是，它不會重新加載您的網頁。

這些方法之間的主要區別是 pushState 將在歷史堆棧中添加一個新條目，而 replaceState 將替換當前的歷史值而不是添加新的值一。如果您仍然對這兩種方法感到困惑，那么讓我們用更好的示例來演示相同的情況。

假設我們有一堆標記為 1 和 2 的兩個方塊，而您手中有標記為 3 的方塊。現在，當我們執行pushState時，塊3將被添加到現有堆棧中，因此堆棧將有3個塊。

現在假設您手中有兩個塊和另一個塊的相同堆棧。當我們執行replaceState時，它會從堆棧中取出塊2并放置塊3。因此歷史值的數量將保持不變。另一方面，pushState 會將歷史計數增加一。

下圖顯示了相同的演示。

到目前為止，我們已經介紹了 pushState 和 replaceState 事件，以便控制瀏覽器歷史記錄，但假設我們有各種虛假歷史記錄在瀏覽器中總計。用戶可能會也可能不會重定向到該頁面。在這種情況下，當用戶點擊瀏覽器來回按鈕導航到歷史頁面時，就會出現問題。

雖然您可能期望在解決 pushState 或 replaceState 方法時觸發 popstate ，但實際上，它是事實并非如此。相反，當您瀏覽會話歷史記錄條目時，通過點擊后退或前進按鈕或使用 history.go 或 history.back 方法。

在WebKit瀏覽器中，文檔的onload事件后會觸發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>

登錄后復制

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>

登錄后復制