bachir
/
materio-base-d7


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
							<html>
<head>
	<title>HTML5 History API Demo</title>
</head>
<body>
	<textarea id="log" style="width:100%;height:400px;margin:1em;"></textarea>
	<div id="url" style="border:1px black dotted;height:1em;margin:1em;"></div>
	<div id="buttons" style="margin:1em;"></div>
	<script type="text/javascript">
			var $url = document.getElementById('url'), $log = document.getElementById('log');

			window.onpopstate = function(event) {
				var message =
					"onpopstate: "+
					"location: " + location.href + ", " +
					"data: " + JSON.stringify(event.state) +
					"\n\n"
					;

				$url.innerHTML = location.href;
				$log.innerHTML += message;
				console.log(message);
			};

			window.onhashchange = function(event) {
				var message =
					"onhashchange: "+
					"location: " + location.href + ", "+
					"hash: " + location.hash +
					"\n\n"
					;

				$url.innerHTML = location.href;
				$log.innerHTML += message;
				console.log(message);
			};

			// Prepare Buttons
			var
				buttons = document.getElementById('buttons'),
				scripts = [
					'history.pushState({state:1}, "State 1", "?state=1");',
					'history.pushState({state:2}, "State 2", "?state=2");',
					'history.replaceState({state:3}, "State 3", "?state=3");',
					'location.hash = Math.random();',
					'history.back();',
					'history.forward();',
					'document.location.href = document.location.href.replace(/[\#\?].*/,"");'
				],
				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;
	</script>
</body>
</html>