Estoy tratando de crear un sitio web donde todas las páginas se llamen con Ajax. Cuando hago clic en cualquier enlace de la página, la URL y el contenido de la página cambian sin actualizar toda la página (similar a Facebook). Hasta ahora todo está bien.
El problema es: cuando hago clic en el botón de retroceder o avanzar , la URL cambia pero el contenido de la página no cambia.
Código de ejemplo:
function loadDoc($link) { // example for $link : /example.php var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var parser = new DOMParser(); var doc = parser.parseFromString(xhttp.responseText, "text/html"); var elem = doc.getElementById("content"); document.getElementById("content").innerHTML = elem.innerHTML; } }; xhttp.open("GET", $link, true); xhttp.send(); window.history.pushState('', 'Settings', $link); // dynamic url changing }(Estructura completamente separada o ideas adicionales también son bienvenidas)
Ha utilizado pushState para agregar una entrada al historial del navegador, pero no ha agregado un controlador de eventos para determinar qué sucede cuando el navegador navega hacia atrás. El navegador no memorizará automáticamente el estado del DOM por usted.
Aquí hay un ejemplo simple:
<div id="content">1</div> <button>1</button> <button>2</button> <button>3</button> <button>4</button> <script> const div = document.querySelector('div'); addEventListener('click', event => { if (event.target.tagName.toLowerCase() !== 'button') return; const last = div.textContent; const next = event.target.textContent; div.textContent = next; history.pushState({ value: next }, `Page ${next}`, `/page/${next}`); }); addEventListener('popstate', event => { let state = event.state; if (state === null) { // special case: This is the state before pushState was called // We know what that should be: state = { value: 1 }; } div.textContent = state.value; console.log('location: ' + document.location + ', state: ' + JSON.stringify(event.state)); }); </script>