HTML5 hisotry API exercises
<!DOCTYPE html> | |
<html lang="ja"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>HTML5 history API exercise</title> | |
</head> | |
<script> | |
/* | |
HTML5 history API exercise 1. | |
reference: | |
https://developer.mozilla.org/ja/docs/Web/Guide/DOM/Manipulating_the_browser_history | |
http://breaktimes.hatenablog.com/entry/history-api | |
http://myakura.github.io/dih5ja/history.html | |
http://uhyohyo.net/javascript/12_3.html | |
http://nacika.com/entry/2013/01/18/003325/ | |
http://www.webcyou.com/?p=4329 | |
*/ | |
function updateView(newState) { | |
document.getElementById("k1").innerHTML = newState.k1; | |
document.getElementById("k2").innerHTML = newState.k2; | |
} | |
function onPopState(event) { | |
if(event.state) { | |
console.log(event.state); | |
updateView(event.state); | |
} else { | |
console.log("state = empty"); | |
} | |
} | |
function pushState1() { | |
var newState = {k1:100, k2:"abc"}; | |
history.pushState(newState, null, "#state-1") | |
updateView(newState); | |
} | |
function pushState2() { | |
var newState = {k1:200, k2:"def"}; | |
history.pushState(newState, null, "#state-2") | |
updateView(newState); | |
} | |
window.addEventListener("popstate", onPopState); | |
function onLoad() { | |
var initState = {k1:0, k2:"initialized"}; | |
history.replaceState(initState, null); | |
updateView(initState); | |
} | |
</script> | |
<body onload="onLoad();"> | |
<input type="button" value="pushState1()" onclick="pushState1();"> | |
<input type="button" value="pushState2()" onclick="pushState2();"> | |
<hr> | |
<input type="button" value="history.back()" onclick="history.back();"> | |
<input type="button" value="history.forward()" onclick="history.forward();"> | |
<hr> | |
<div id="k1"></div> | |
<div id="k2"></div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment