Skip to content

Instantly share code, notes, and snippets.

@zandzpider

zandzpider/.htaccess

Created October 16, 2014 13:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zandzpider/dfbdfad20f97f21b9ff6 to your computer and use it in GitHub Desktop.
Save zandzpider/dfbdfad20f97f21b9ff6 to your computer and use it in GitHub Desktop.
Download ZIP
HTML5 History API
Raw
.htaccess
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<base href="http://localhost/html5-history/">
</head>
<body>
<ul>
<li><a href="test.html">test.html</a></li>
<li><a href="test1.html">test1.html</a></li>
<li><a href="monkey/banana.html">monkey/banana.html</a></li>
</ul>
<div id="target">changeme!</div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function () {
$('li').on('click', 'a', function (e) {
e.preventDefault();
var link = $(this),
href = link.attr('href');
data = { title : href };
history.pushState(data, data.title, href);
markLocation();
});
window.addEventListener("popstate", markLocation);
markLocation();
function markLocation() {
$('#target').html(location.pathname);
var state = history.state;
$('title').text(state.title);
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment