63 lines
1.8 KiB
HTML
63 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Local Site — History</title>
|
|
<link rel="stylesheet" href="assets/site.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>History Page</h1>
|
|
<nav><a href="index.html">Home</a></nav>
|
|
</header>
|
|
<main>
|
|
<h2>history.pushState</h2>
|
|
<button id="push-btn">pushState({n:1}, '', '?pushed=1')</button>
|
|
<p>URL after push: <span id="push-url">—</span></p>
|
|
|
|
<h2>history.replaceState</h2>
|
|
<button id="replace-btn">replaceState({n:2}, '', '?replaced=1')</button>
|
|
<p>URL after replace: <span id="replace-url">—</span></p>
|
|
|
|
<h2>popstate event</h2>
|
|
<button id="back-btn">history.back()</button>
|
|
<p>popstate fired: <span id="popstate-out">never</span></p>
|
|
<p>URL on popstate: <span id="popstate-url">—</span></p>
|
|
|
|
<h2>Hash change</h2>
|
|
<a href="#frag-1">Go to #frag-1</a>
|
|
<p>hashchange fired: <span id="hash-out">never</span></p>
|
|
</main>
|
|
<script>
|
|
function $(id) { return document.getElementById(id); }
|
|
|
|
$('push-btn').onclick = function () {
|
|
try {
|
|
history.pushState({ n: 1 }, '', '?pushed=1');
|
|
$('push-url').textContent = location.href;
|
|
} catch (e) { $('push-url').textContent = 'ERROR: ' + e.message; }
|
|
};
|
|
|
|
$('replace-btn').onclick = function () {
|
|
try {
|
|
history.replaceState({ n: 2 }, '', '?replaced=1');
|
|
$('replace-url').textContent = location.href;
|
|
} catch (e) { $('replace-url').textContent = 'ERROR: ' + e.message; }
|
|
};
|
|
|
|
window.addEventListener('popstate', function (e) {
|
|
$('popstate-out').textContent = 'yes (state=' + JSON.stringify(e.state) + ')';
|
|
$('popstate-url').textContent = location.href;
|
|
});
|
|
|
|
$('back-btn').onclick = function () {
|
|
history.back();
|
|
};
|
|
|
|
window.addEventListener('hashchange', function () {
|
|
$('hash-out').textContent = 'yes (' + location.hash + ')';
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|