Las respuestas me llevaron hasta este código que encontré.
Código HTML:
<div class="container">
<div class="row">
<ul class="nav navbar-nav">
<li><a href="index.html" class="historyAPI">Home</a></li>
<li><a href="index2.html" class="historyAPI">About</a></li>
<li><a href="index3.html" class="historyAPI">Contact</a></li>
</ul>
</div>
<div class="row">
<div class="col-md-6">
<div class="well">
Click on Links above to see history API usage using <code>pushState</code> method. asdfasdf
</div>
</div>
<div class="row">
<div class="jumbotron" id="contentHolder">
<h1>Home!</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery('document').ready(function(){
jQuery('.historyAPI').on('click', function(e){
e.preventDefault();
var href = $(this).attr('href');
// Getting Content
getContent(href, true);
jQuery('.historyAPI').removeClass('active');
$(this).addClass('active');
});
});
// Adding popstate event listener to handle browser back button
window.addEventListener("popstate", function(e) {
// Get State value using e.state
getContent(location.pathname, false);
});
function getContent(url, addEntry) {
$.get(url)
.done(function( data ) {
// Updating Content on Page
$('#contentHolder').html(data);
if(addEntry == true) {
// Add History Entry using pushState
history.pushState(null, null, url);
}
});
}
</script> Lo he investigado un poco y he leido sobre el tema y entiendo que aquí (
history.pushState(null, null, url); ) puedo jugar con el historial del navegador y que en teoría en la capa con id
contentHolder será lo único que modificara al cargar la página y el resto quedará intacto. Pero vamos que no consigo ponerlo en marcha.
He creado tres index con contenido distintio dentro de esta capa y fuera confiando que recargase solo la capa
contentHolder pero obviamente no tengo ni idea de que estoy haciendo.
Seguiré intentándolo y ya les comentaré.