Tengo esta página que tiene dos tablas. La tabla de la izquierda es una lista de enlaces que apuntan a elementos en la tabla de la derecha usando A href='#itemid' con el correspondiente A id='itemid' en la tabla de la derecha. Funciona bien cuando simplemente hace clic en los enlaces de la tabla de la izquierda, pero si hago clic en el botón Atrás o Adelante, la página se vuelve a cargar pero no vuelve a la posición en la que estaba. La URL de la página incluye el #itemid, así que no No entiendo por qué la página no vuelve a esa posición cuando se hace clic en el botón Atrás o Adelante. Además, la primera carga es solo el nombre de la página web sin un hashtag, por lo que también necesito saber cómo decirle al navegador que vuelva a cargar la página con ambas tablas en la parte superior. Actualmente, la única forma en que puedo hacer que coopere es manteniendo presionada la tecla MAYÚS y haciendo clic en el botón Actualizar.
He probado todos los ejemplos de actualización que puedo encontrar y ninguno de ellos funciona.
META http-equiv='refresh' content='0'Esto fue desastroso, solo actualizaba constantemente la página.
window.location,refresh(); document.location.refresh(); location.refresh();Todos aquellos en un atributo unLoad() en la etiqueta BODY, con y sin verdadero como argumento para la función de actualización. Realmente no quiero que el servidor de mi servidor web tenga que servir constantemente la página de todos modos, por lo que la verdad no es una opción, incluso si funcionó.
Se me acabaron las ideas. También entiendo que el historial es una sola lista doblemente vinculada y que los botones de avance y retroceso solo se mueven a través de la lista en cada dirección, pero pensaría que la acción daría como resultado que la página se recargara de la forma en que se veía la última vez que estuvo. en esa página, no como si todavía estuvieras en la última página en la que estuviste.
Debe usar la API de historial para enviar y abrir estados de acuerdo con sus necesidades.
Cada vez que hace clic en uno de sus enlaces, debe presionar un estado y una ubicación para que cuando presione el botón Atrás, ese estado se restablezca con la ubicación dada.
A continuación se muestra un ejemplo de cómo podría usarlo. No recomendaría administrar todo el contenido de la página con innerHTML. Esto solo se hace por simplicidad. Lo que está haciendo en la devolución de llamada y con el estado, y en qué circunstancias usa saveState para impulsar el estado adicional, depende de usted.
const router = (hook = console.log) => { window.onpopstate = ({ state }) => hook(new URL(window.location.href), state); hook(new URL(window.location.href)); return { anchorHandler: e => { e.preventDefault(); window.history.pushState(null, "", e.target.href); hook(new URL(e.target.href)); return false; }, saveState: (state, href = window.location.href) => { window.history.pushState(state, "", href); } }; }; const locations = { "/": (state) => `<h1>Home</h1> <p>Type something in this input. If you blur it, it will be saved as state. Now you can navigate back and forth to remove/restore it. <br /> For example, type something and navigate to the about page. Then press the back button. </p> <br /> <input value="${state?.text || ''}" onblur="saveState({text: this.value})" /> `, "/about": (state) => `<h1>About</h1>`, "/contact": (state) => `<h1>Contact</h1>`, } pageContent = document.getElementById("page-content"); const { saveState, anchorHandler } = router((location, state) => pageContent.innerHTML = locations[location.pathname] ? locations[location.pathname](state) : locations["/"](state) ); document .querySelectorAll("a") .forEach(a => a.addEventListener("click", anchorHandler)); <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> <li><a href="/contact">Contact</a></li> </ul> </nav> <main> <div id="page-content"></div> </main>No puedo mostrarlo como fragmento porque, por lo tanto, hay limitaciones de seguridad en torno al uso de la API de historial. Puede verificar extraer este repositorio y ejecutarlo localmente https://github.com/bluebrown/spa-router-example , o visitar esta página donde he implementado ese repositorio, https://spa-router-example.pages.dev / .