2

Estoy usando pushState para crear una aplicación web que no sea necesario recargar la página, incluso para cambiar el link (por ejemplo, youtube, cuando activas la vista de un vídeo en miniatura, puedes navegar por todo el youtube sin recargar la página, incluso retorcer), el problema es cuando doy click en retroceder, cambia el link pero la página sigue mostrando el mismo contenido aunque el link sea diferente.

Encontré lo siguente buscando en Youtube:

var tabs = document.querySelectorAll("a[data-tab-for]");
var contents = document.querySelectorAll(".content>p");

tabs.forEach(tab => tab.addEventListener('click', tabClicked));
window.onpopstate = checkState;

history.replaceState({
    tabForId: tabs[0].dataset.tabFor
}, null, "tab-"+tabs[0].dataset.tabFor);

function showContent(id) {
    contents.forEach(content => {
        if (content.getAttribute('id') === id) content.classList.remove('hide');
        else content.classList.add('hide');
    });
    tabs.forEach(tab => {
        if (tab.dataset.tabFor === id) tab.classList.add("active");
        else tab.classList.remove("active");
    });
}

function tabClicked(e) {
    var contentId = e.target.dataset.tabFor;
    e.preventDefault();
    showContent(contentId);
    history.pushState({
        tabForId: contentId
    }, null, "tab-"+contentId);
}

function checkState(e) {
    // page reload
    if(e.state) {
        console.log(e.state.tabForId);
        showContent(e.state.tabForId);
    }
}
.hide {
    display : none;
}
p {
    padding: 5px;
}
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>History pushState, popstate</title>
</head>

<body class="container">
    <h1>History pushState, popstate</h1>
    <ul class="nav nav-pills">
        <li class="nav-item">
          <a class="nav-link active" href="" data-tab-for="content-1">Tab-1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="" data-tab-for="content-2">Tab-2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="" data-tab-for="content-3">Tab-3</a>
        </li>
      </ul>
      <div class="content">
          <p id="content-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi atque earum sit excepturi quisquam, eos reprehenderit doloremque culpa sunt id debitis corporis mollitia at qui dicta enim repellat nostrum eius. Placeat neque voluptas accusamus fugiat ipsum, adipisci totam excepturi ratione dolore sequi nesciunt culpa! Quae vitae suscipit placeat amet animi!</p>
          <p id="content-2" class="hide">Laborum, beatae deleniti. Sint placeat vel vero aspernatur itaque, aliquid facilis. Incidunt error in sit, expedita vel deleniti dignissimos sapiente distinctio doloribus mollitia vitae quisquam accusamus eos ratione quidem cumque ullam odit reiciendis vero? Delectus aspernatur fuga eos voluptate ratione atque incidunt, cumque facere aliquid, soluta deleniti, facilis perspiciatis quam?</p>
          <p id="content-3" class="hide">Aut nobis sequi officiis commodi. Ipsa quae natus maxime officiis reprehenderit facere enim id dolore expedita numquam, error ratione repellendus sit, quis animi nobis impedit dignissimos officia suscipit. Quaerat numquam laudantium explicabo debitis omnis corporis, sunt cumque nulla odio, libero doloremque veniam nobis voluptate incidunt qui nisi quisquam distinctio quam?</p>
      </div>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="app.js"></script>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>

</html>

Resulta que este me permite retroceder, pero no quiero hacerlo de esta manera, quiero cargar un archivo .html con AJAX y esa es la forma en el que lo he hecho, ¡pero no sé como implemetar la parte de retoceder! AYUDA.

Este es el código que yo estoy implementado:

 var url = window.location.host;
 var urlC = window.location;
 $(document).ready(function(){
 $('#open_post').on('click', function(){OpenPost()});
  $('#open_dashboard').on('click', function(){OpenDashboard()});
 $('#open_dashboardw').on('click', function(){OpenDashboard()});
 })

function OpenPost() {
    $.ajax({
        type: 'GET',
        url: '/dashboard/ajax/Ajax-sites/post.ajax.php'   
    })
    .done(function(result){

     if(urlC!= 'http://'+url+'/dashboard/post/'){ //compruebo si el link ha sido cambiado.
     window.history.pushState(null, 'new post', "/post/");
      $('#cont').html(result);
        }else{
      console.log('ya esta abierto.');
        }
    })
    .fail(function(){
          console.log('Error with AJAX!');
    })
   }

function OpenDashboard() {
$.ajax({
    type: 'GET',
    url: '/dashboard/ajax/Ajax-sites/dashboard.ajax.php'   
})
.done(function(result){
  if(urlC != 'http://'+url+'/dashboard/'){
  window.history.pushState(null, 'Dashboard', "/home/");
  $('#cont').html(result);
    }else{
  console.log('ya esta abierto.');
    }
})
.fail(function(){
      console.log('Error with AJAX!');
  })
 }

1 respuesta 1

0

El window debe escuchar al evento popstate y en esa funcion es llamada cuando la historia cambia, ejemplo:

function onLocationChange(event) {
    // Aqui puedes hacer acionar los cambios del site
    console.log(`window a detectado el cambio del url a: ${window.location.pathname}`);
};
window.addEventListener('popstate', onLocationChange);

Mas informacion aqui

Tu Respuesta

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

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