Básicamente, estoy codificando un sitio web personal y he creado una aplicación de una sola página con ajax para que el contenido se agregue a la página entre el encabezado y el pie de página cuando se hace clic en una página en la barra de navegación. Tuve que codificar manualmente el estado de inserción y el estado emergente para que las flechas hacia atrás y hacia adelante funcionaran, lo cual hacen. Sin embargo, el único problema que queda es que cuando vuelvo a cargar la página, aparece un error de entrada no encontrada.
Soy muy nuevo en desarrollo web y javascript, por lo que parte de mi código es un poco desordenado. Sé que el problema de recarga tiene que ver con la URL de la página agregada que en realidad no existe en el servidor.
Aquí están las piezas relevantes de mi código:
HTML:
<nav> <ul class='nav-bar'> <li class='nav-item'><a id='writing'>Writing</a></li> <li class='nav-item'><a id='editing'>Editing</a></li> <li class='nav-item'><a id='about'>About</a></li> <li class='nav-item'><a id='contact'>Contact</a></li> </ul> </nav>JavaScript
//change page on nav click $('.nav-bar li a').on('click', function(e) { e.preventDefault(); var page = $(this).attr('id'); var file = page + '.html'; var origin = window.location.origin; //nav color change for current page removeActiveLinks(); $(this).parent().addClass("active"); $.ajax({ type: 'GET', url: origin, dataType: 'html', success: function(response) { $('#content').load(file); }, error: function(error) { console.log('There was an error', error); } }); window.history.pushState(file, null, '/' + page); }); //nav for home page $('#home').on('click', function(e) { e.preventDefault(); removeActiveLinks(); $('#content').load('home.html') window.history.pushState('index.html', null, '/'); }); //ensure page back functionality window.addEventListener('popstate', function(event) { var prevState = event.state; $('#content').load(prevState); removeActiveLinks(); var page_id = '#' + prevState.split('.')[0]; $(page_id).parent().addClass('active'); });Sugeriría algo más simple, usando simple load() (abreviatura de ajax) y el state de la historia directamente.
No probado, pero debería funcionar bien.
// Initial page load $(document).ready(function(){ $("#content").load("home.html"); }) // Change page on nav click $(".nav-bar li a, #home").on("click", function (e) { e.preventDefault(); var file = this.id + ".html"; //nav color change for current page $(".active").removeClass("active"); if(this.id != "home"){ $("#"+this.id).parent().addClass("active"); } $("#content").load(file); window.history.pushState(file, null, "/"); }); // Ensure page back functionality window.addEventListener("popstate", function (event) { var prevState = event.state; $("#content").load(prevState); var page_id = "#" + prevState.split(".")[0]; $(".active").removeClass("active"); if(page_id != "#home"){ $(page_id).parent().addClass("active"); } }); Pero no hay /writing en la barra de direcciones con esta solución. Si insiste en ello, tendrá que sumergirse en configuraciones de ruta más complejas en el servidor.