Lesson X:

HTML5 History API

window.history

The History Interface

举个栗子

static/5.html


<!doctype html>
<title>Line Game - 5</title>
<p>You are at coordinate 5 on the line.</p>
<p>
 <a href="6.html">Advance to 6</a> or
 <a href="4.html">retreat to 4</a>?
</p>
	

传统静态方案

ajax/5.html


<!doctype html>
<!-- this starts off as http://example.com/5.html -->
<title>Line Game - 5</title>
<p>You are at coordinate <span id="coord">5</span> on the line.</p>
<p>
 <a href="6.html" onclick="go(1); return false;">Advance to 6</a> or
 <a href="4.html" onclick="go(-1); return false;">retreat to 4</a>?
</p>
<script>
 var currentPage = 5; // prefilled by server
 function go(d) {
   setupPage(currentPage + d);
 }
 function setupPage(page) {
   currentPage = page;
   document.title = 'Line Game - ' + currentPage;
   document.getElementById('coord').textContent = currentPage;
   document.links[0].href = (currentPage+1) + '.html';
   document.links[0].textContent = 'Advance to ' + (currentPage+1);
   document.links[1].href = (currentPage-1) + '.html';
   document.links[1].textContent = 'retreat to ' + (currentPage-1);
 }
</script>	
	

Ajax方案之一

ajax/n.html#5


<!doctype html>
<!-- this starts off as http://example.com/5.htmln.html#5 -->
<title>Line Game - 5</title>
<p>You are at coordinate <span id="coord">5</span> on the line.</p>
<p>
 <a href="6.html#6" onclick="go(1); return false;">Advance to 6</a> or
 <a href="4.html#4" onclick="go(-1); return false;">retreat to 4</a>?
</p>
<script>
 var currentPage = 5; // prefilled by server
 function go(d) {
   setupPage(currentPage + d);
   location.hash = '#' + (currentPage + d)
 }
 function setupPage(page) {
   currentPage = page;
   document.title = 'Line Game - ' + currentPage;
   document.getElementById('coord').textContent = currentPage;
   document.links[0].href = (currentPage+1) + '.html''#' + (currentPage+1);
   document.links[0].textContent = 'Advance to ' + (currentPage+1);
   document.links[1].href = (currentPage-1) + '.html''#' + (currentPage-1);
   document.links[1].textContent = 'retreat to ' + (currentPage-1);
 }
 
 setInterval(function() {
   var page = parseInt(location.hash.slice(1)) || 1
   if (page !== currentPage) setupPage(page)
 }, 200)
</script>
	

Ajax方案之二

html5/?x=5


<!DOCTYPE HTML>
<!-- this starts off as http://example.com/?x=5 -->
<title>Line Game - 5</title>
<p>You are at coordinate <span id="coord">5</span> on the line.</p>
<p>
 <a href="?x=6" onclick="go(1); return false;">Advance to 6</a> or
 <a href="?x=4" onclick="go(-1); return false;">retreat to 4</a>?
</p>
<script>
 var currentPage = 5; // prefilled by server
 function go(d) {
   setupPage(currentPage + d);
   history.pushState(currentPage, document.title, '?x=' + currentPage);
 }
 onpopstate = function(event) {
   setupPage(event.state || 5);
 }
 function setupPage(page) {
   currentPage = page;
   document.title = 'Line Game - ' + currentPage;
   document.getElementById('coord').textContent = currentPage;
   document.links[0].href = '?x=' + (currentPage+1);
   document.links[0].textContent = 'Advance to ' + (currentPage+1);
   document.links[1].href = '?x=' + (currentPage-1);
   document.links[1].textContent = 'retreat to ' + (currentPage-1);
 }
</script>		
	

浏览器历史队列图解

(略)

HTML5 History API 方案

参考文档:HTML5标准

FAQ

习题