history . back()
Goes back one step in the joint session history.
If there is no previous page, does nothing.
history . forward()
Goes forward one step in the joint session history.
If there is no next page, does nothing.
history . go( [ delta ] )
Goes back or forward the specified number of steps in the joint session history.
A zero delta will reload the current page.
If the delta is out of range, does nothing.
history . length
Returns the number of entries in the joint session history.
history . pushState(data, title [, url ] )
Pushes the given data onto the session history, with the given title, and, if provided, the given URL.
history . replaceState(data, title [, url ] )
Updates the current entry in the session history to have the given data, title, and, if provided, URL.
history . state
Returns the current state object.
<!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>
<!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>
<!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>
<!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标准
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) return;