Hola compañeros.
antes que nada queria desearles unas felices fiestas y un 2013 lleno de éxitos.
Estoy desarrollando un proyecto en en el cual quiero agregar ajax, el Objeto history, para manipular el historial de los navegadores.
En fin quiero montar una aplicación en el cual los usuarios puedan navegar en toda la web sin tener que regargar ni una sóla página. esto sé hacerlo mas o menos con la ayuda de los manuales, el único problema con el cual me enfrento es que cuando cago el contenido solicitado con Ajax en el <div> que quiero no se que hacer para que se cambien las etiquetas <title>,<description><keywords>,etc...
Esta web, lo ha conseguido y este es el código que emplea me gustaria que alguien me ayude a entenderlo, por favor.
Código HTML:
<script>
// THIS IS WHERE THE MAGIC HAPPENS
$(function() {
$('nav a').click(function(e) {
$("#loading").show();
href = $(this).attr("href");
loadContent(href);
// HISTORY.PUSHSTATE
history.pushState('', 'New URL: '+href, href);
e.preventDefault();
});
// THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
window.onpopstate = function(event) {
$("#loading").show();
console.log("pathname: "+location.pathname);
loadContent(location.pathname);
};
});
function loadContent(url){
// USES JQUERY TO LOAD THE CONTENT
$.getJSON("content.php", {cid: url, format: 'json'}, function(json) {
// THIS LOOP PUTS ALL THE CONTENT INTO THE RIGHT PLACES
$.each(json, function(key, value){
$(key).html(value);
});
$("#loading").hide();
});
// THESE TWO LINES JUST MAKE SURE THAT THE NAV BAR REFLECTS THE CURRENT URL
$('li').removeClass('current');
$('a[href="'+url+'"]').parent().addClass('current');
}
</script>