cambiar de urls sin que recargue el navegador y conservando información.

[josico]

Buenos días.

Tengo una lista de artículos de vídeos. Los vídeos los tengo listados con paginación infinita y cuando pincho en un vídeo, este me lleva a la url del vídeo de forma que pierdo el hilo de la páginación infinita. Esto causa frustración ya que cuando vuelves atrás debes empezar de nuevo a paginar.

Probé ha crear una ventana modal con un trozo de código que encontré por ahí para mostrar el vídeo sin que el usuario pierda la paginación pero claro, pierdo la url del vídeo.

Me he liado ha hacer chapuzas con cookies y de mas historias pero he leído que con javascript o ajax de javascript se puede crear transiciones entre distintas URL de una página web con efectos sin necesidad de recargar la página y evitar así perder la información.
Con este lenguaje ando algo perdido por lo que si alguien me puede orientar al respecto.

Básicamente y perdonarme si sueno bruto al explicar lo que quiero conseguir; cambiar de /categoria a /video como si fuese un efecto de hash #pagina1 a #pagina2 sin perder la información de lo generado en la primera página.

¿Se puede hacer o es una locura?

[alvaro_trewhela]

Consulta, por que te molesta volver a paginar?

[xfxstudios]

Primeramente no es tanto lio tu problema, se pùede resolver con jquery y quiza ajax.
Segundo: muestra algo de codigo para poder ayudarte, es decir, como estan confoprmados los enlaces y que data poseen, para poder determinar el bloque de codigo a escribir y com interactuar con estos, en todo caso la idea del modal es buena siempre que sepas como armar los enlaces y el codigo js que se encargara de la tarea

[Alexis88]

Utiliza el método .pushState() para cambiar la URL sin recargar el navegador, mientras que cambias el contenido con una petición asíncrona (AJAX). Lo mejor de todo es que no es necesario el uso de librerías para hacer esto.

[josico]

Las respuestas me llevaron hasta este código que encontré.

Código HTML:

<div class="container">
    <div class="row">
        <ul class="nav navbar-nav">
            <li><a href="index.html" class="historyAPI">Home</a></li>
            <li><a href="index2.html" class="historyAPI">About</a></li>
            <li><a href="index3.html" class="historyAPI">Contact</a></li>
        </ul>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="well">
                Click on Links above to see history API usage using <code>pushState</code> method. asdfasdf
            </div>
        </div>
        <div class="row">    
            <div class="jumbotron" id="contentHolder">
                <h1>Home!</h1>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    jQuery('document').ready(function(){
         
        jQuery('.historyAPI').on('click', function(e){
            e.preventDefault();
            var href = $(this).attr('href');
             
            // Getting Content
            getContent(href, true);
             
            jQuery('.historyAPI').removeClass('active');
            $(this).addClass('active');
        });
         
    });
     
    // Adding popstate event listener to handle browser back button  
    window.addEventListener("popstate", function(e) {
         
        // Get State value using e.state
        getContent(location.pathname, false);
    });
     
    function getContent(url, addEntry) {
        $.get(url)
        .done(function( data ) {
             
            // Updating Content on Page
            $('#contentHolder').html(data);
             
            if(addEntry == true) {
                // Add History Entry using pushState
                history.pushState(null, null, url); 
            }
             
        });
    }
</script> 

Lo he investigado un poco y he leido sobre el tema y entiendo que aquí ( history.pushState(null, null, url); ) puedo jugar con el historial del navegador y que en teoría en la capa con id contentHolder será lo único que modificara al cargar la página y el resto quedará intacto. Pero vamos que no consigo ponerlo en marcha.

He creado tres index con contenido distintio dentro de esta capa y fuera confiando que recargase solo la capa contentHolder pero obviamente no tengo ni idea de que estoy haciendo.

Seguiré intentándolo y ya les comentaré.

[Alexis88]

Si estás siguiendo ese ejemplo, necesitarás cargar la librería jQuery antes de ese bloque de código. Puedes conseguirlo en su página oficial.

Si no deseas usar librerías, puedes probar con este ejemplo:

Código Javascript:

document.addEventListener("DOMContentLoaded", function(){
    this.addEventListener("click", function(e){
        e.target.className == "historyAPI" && (function(event, link){
            event.preventDefault();
 
            var href = link.href;
 
            getContent(href, true);
 
            document.querySelector(".historyAPI").classList.remove("active");
            link.classList.add("active");
        })(e, e.target);
 
        window.addEventListener("popstate", function(e){
            getContent(location.pathname, false);
        });
 
        function get(url){
            return new Promise(function(done, fail){
                var xhr = new XMLHttpRequest();
 
                xhr.open("GET", url, true);
                xhr.addEventListener("load", function(){
                    this.status == 200 && done(this.responseText);
                }, false);
                xhr.send();
            });
        }
 
        function getContent(url, addEntry){
            get(url)
                .then(function(data){
                    document.querySelector("#contentHolder").innerHTML = data;
 
                    if (addEntry == true){
                        history.pushState(null, null, url);
                    }
                });
        }
    }, false);
});
 

Puedes usarlo directamente como está, sin añadir librería alguna. Son unas cuantas líneas más de código, pero muchas menos que las miles que constituyen a jQuery.