Bueno, tengo un script que hace que cambie el contenido de la pagina sin cargar la pagina completa, ademas esta cambia el link para que funcionen los botones de atras y adelante.
pero me gustaría saber si hay algún script que haga esto mismo, pero obviamente mejor. ya que el código que tengo yo tiene algunos problemas.
este es el código por si lo quieren revisar.
Código Javascript:
Ver original
<script type="text/javascript"> (function($){ var contenido = $('div#contenido'), url_anterior = '', extension = '.html', original = window.location; $('ul#nav a').each(function(){ //Cambiamos los href por el contenido del atributo data-hash $(this).attr('href', $(this).data('hash')); }); $('ul#nav a').on('click', function(e){ var hash = $(this).attr('href'); e.preventDefault(); revisarURL(hash).done(function(){ window.location.href = hash; // Buen hash, cambiemoslo en la URL }).fail(function(){ window.location.href = '#error'; }).always(function(datos){ contenido.html(datos); }); }); revisarURL(); // Si hay un hash en la URL (ej, copiamos y pegamos en una conversación) cargará la URL correcta. setInterval(function(){ revisarURL().fail(function(){ window.location.href = '#error'; }).always(function(datos){ contenido.html(datos); }); },250); // Revisamos cualquier cambio en el Hash cada 250 milisegundos function revisarURL (hash){ var deferred = $.Deferred(); if (!hash) { // Esto ocurre cuando se pulsa el botón de atrás o adelante en el navegador o al pasar una URL con hash hash = window.location.hash; } if (!hash) { // Esto puede pasar si es la primera URL - index.html en nuestro caso var url = window.location.pathname; // Obtenemos la URL completa var archivo = url.substring(url.lastIndexOf('/')+1); // Nos quedamos con el nombre del archivo (index.html) hash = archivo.replace(extension,''); // Le quitamos la extensión para convertirlo en "hash" } if (hash !== url_anterior){ url_anterior = hash; cargarPagina(hash).done( function(data){ var html = $(data); var filtrado = html.find('#contenido'); deferred.resolve(filtrado.html()); } ).fail(function(){ // La URL no existe deferred.reject('<p>La página no existe.</p>'); // Rechazamos nuestro deferred }); } return deferred.promise(); // Devolvemos una promesa, no un deferred } function cargarPagina(hash){ url = hash.replace('#',''); //Quitamos la almohadilla return $.ajax({ url: url + extension, async: true, dataType: "html"}); } })(jQuery); </script>
el problema de este código es que si por ejemplo cambio al link 2 del menú, luego copio el link y lo pego en otra pestaña (o actualizo ahí mismo) me mostrara el contenido del link 1 (el de inicio)
otro problema que tiene que por ejemplo al hacer click en algún link, no aparece algo que diga que este cargando. simplemente lo cambia. y es un poco problemático cuando se demora en cargar el contenido ya que uno no sabe si esta cargando o no, hasta que cambia.
si no entienden de como funciona, aquí tengo una pag. que hace lo que quiero.
http://livedemo00.template-help.com/wt_35059/index.html#!/page_Services
revisé el codigo pero es complejo.
bueno si conocen algun script que haga esto mismo pero de forma mas estable por favor compartan, o si pueden modificar el código anterior.
PD: si quieren el código completo, lo puedo compartir por correo.