arrow-admin
Version:
Arrow Admin Website
80 lines (68 loc) • 2.58 kB
HTML
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
History.js
</title>
</head>
<body style="padding-bottom:40px">
<!-- Scripts -->
<script>if ( typeof window.JSON === 'undefined' ) { document.write('<script src="../scripts/uncompressed/json2.js"><\/script>'); }</script>
<script src="../vendor/jquery.js"></script>
<script src="../scripts/bundled/html4+html5/jquery.history.js"></script>
<!-- HTML -->
<div id="wrap">
<!-- Intro -->
<h1>History.js</h1>
<p>History.js gracefully supports unicode.</p>
<!-- Textarea for Logging -->
<textarea id="log" style="width:100%;height:400px"></textarea>
<!-- Buttons -->
<ul id="buttons">
</ul>
<!-- Our Script -->
<script>
(function(window,undefined){
// Check Location
if ( document.location.protocol === 'file:' ) {
alert('The HTML5 History API (and thus History.js) do not work on files, please upload it to a server.');
}
// Establish Variables
var
State = History.getState(),
$log = $('#log');
// Log Initial State
History.log('initial:', State.data, State.title, State.url);
// Bind to State Change
History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
// Log the State
var State = History.getState(); // Note: We are using History.getState() instead of event.state
History.log('statechange:', State.data, State.title, State.url);
});
// Prepare Buttons
var
buttons = document.getElementById('buttons'),
scripts = [
'History.pushState({state:1,rand:Math.random()}, "State 1", "?läu=ßüs"); // logs {state:1,rand:"some random value"}, "State 1", "?l#äu=ßüs"',
'History.pushState({state:2,rand:Math.random()}, "State 2", "?chinese=リオれ"); // logs {state:2,rand:"some random value"}, "State 2", "/chinese/2"',
'History.back(); // logs {state:3}, "State 3", "?state=3"',
'History.back(); // logs {state:1}, "State 1", "?state=1"',
'History.back(); // logs {}, "The page you started at", "?"',
'History.go(2); // logs {state:3}, "State 3", "?state=3"'
],
buttonsHTML = ''
;
// Add Buttons
for ( var i=0,n=scripts.length; i<n; ++i ) {
var _script = scripts[i];
buttonsHTML +=
'<li><button onclick=\'javascript:'+_script+'\'>'+_script+'</button></li>';
}
buttons.innerHTML = buttonsHTML;
})(window);
</script>
</div>
</body>
</html>