0

Tengo una pagina en donde acceso información por medio de js y me voy moviendo entre registros por medio del link que se crean en js, esto no hace cambiar un URL. lo que me estan pidiendo es que pueda utilizar las flechas de adelante y atras del navegado y eso piendo que se puede hacer es agregando paramatros enel URL.

Me pasaron esta página de intel https://ark.intel.com/es en donde se ve que en la página principal se le da clic a Provesadores y el url cambia y ya las flechas de atras y adelante se habilitaron

Como se puede lograr eso? Gracias por su ayuda

3
  • no te entiendo del todo tu pregunta, necesitas ¿implementar que al hacer algo en tu pagina se cambie la URLsin recargar?, o ¿que vaya tomando los datos GET de la URL para realizar acciones?. si es la primera en esta respuesta explican como hacerlo. y si es la segunda, ya depende de en qué tienes hecha la pagina, y probablemente el cambiar de pagina se necesite hacer con algún offset al consultar los datos
    – Roberto
    Commented el 17 oct. 2018 a las 21:43
  • Hola Roberto, mas alla de poner los parametros en el URL seria poder habilitar las flechas de atras y adelante del navegador y poder navegar por medio de esa forma. Gracias Commented el 18 oct. 2018 a las 13:46
  • en ese caso es la segunda opción, ya depende de lo que ocupas para mostrar la pagina, principalmente en qué tienes almacenada la información.
    – Roberto
    Commented el 18 oct. 2018 a las 14:33

1 respuesta 1

0

la solución a lo que buscas se puede implementar mediante el objeto de window llamado history, donde agregas parámetros a la url, sin que recargue la pagina, y cambias el estado del historial del navegador, por lo cual al volver atrás se vuelve a la url anterior, pero sin recargar, a su vez, tambien necesitas escuchar el evento "onpopstate" para detectar cuando se clickean los botones de atrás y adelante del navegador, preguntando en ese momento entonces cuales son los parámetros de la url que cambiaron para aplicar tus cambios en la web, te dejo un par de funciones de ejemplo que hice:

Esta función te permite pasarle parámetros en forma de objeto, y los va a convertir en parámetros tipo get para la url, y luego los seteará en la url y el history del navegador:

const setUrlParams = (params) => {
    if(!params)
        return;
    const paramsUrl = Object.entries(params)
        .reduce((acum, actual, index) => (
            `${acum}${index === 0 ? '?' : '&'}${actual[0]}=${actual[1]}`
        ), '');
    const newUrl = paramsUrl;

    // Según los valores que setees en los parámetros, mostras lo que quieras mostrar en tu web


    // en esto que sigue se cambia el estado del history, y setea los parametros,
    if(window.history.pushState)
        window.history.pushState(null, null, newUrl);
};

ejemplo de llamado a esta funcion:

 setUrlParams({param1: 'valor1', param2: 'valor2'});
// la url cambiara a: www.tu-anterior-url.com/?param1=valor1&param2=valor2

y luego, este evento te permitira acceder a la nueva url cuando clickees en las flechas del navegador y dicha url cambie, en dicho evento tambien debes capturar los parametros para mostrar segun ellos, lo que quieras mostrar en tu web:

window.onpopstate = () => {
   const urlChanged = window.location.href;
   console.log(urlChanged);
   // aquí luego agarras los parámetros de la nueva url y los usas a gusto
};

por lo cual cuando vayas atrás o adelante en el navegador, se disparara este evento y el código que pongas en el.

Espero te sirva, saludos!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.