как действие после щелчка на кнопке браузера вперед

Question

У меня есть этот код:

<script src="jquery.js"></script> 
<script> 
$(function(){ 
    $('.showcontainer').click(function(){ 
     $('.container').fadeIn(); 
     window.history.pushState('','','/test'); 
    }); 

    $('.container').click(function(){ 
     $(this).fadeOut(); 
     window.history.back(); 
    }); 

    window.onpopstate = function(e) { 
     $('.container').fadeOut(); 
    }; 
}); 
</script> 

<input type="button" class="showcontainer" value="button"> 
<div class="container" style="display:none;width:500px;height:500px;background:red"></div> 

Edit:

При нажатии на кнопку showcontainer, она показывает мне окно контейнера и изменения URL-адреса в '/контрольная работа'. Когда я нажимаю на окно контейнера или кнопку браузера, контейнер контейнера скрывается, и '/ test' удаляется из URL-адреса.

Когда я нажимаю кнопку браузера, он меняет URL и не отображает контейнер.

Я хотел бы, чтобы URL-адрес изменился на '/ test', а окно контейнера появится, когда я нажму кнопку браузера. Я не знаю, как это сделать.

Answer 1

Если вы хотите запустить события, когда страницы идут назад и вперед по истории вы хотите передать объект состояние и установить условные так:

$(function() { 
    var stateObj = { 
     page1: true, 
     page2: false 
    }; 
    window.history.pushState(stateObj, '', ''); 

    $('.showcontainer').click(function() { 
     $('.container').fadeIn(); 
     stateObj.page1 = false; 
     stateObj.page2 = true; 
     window.history.pushState(stateObj, '', '/test'); 
    }); 

    $('.container').click(function() { 
     window.history.back(); 
    }); 

    window.onpopstate = function(e) { 
     var state = e.state; 
     if (state.page1) { 
      state.page1 = true; 
      state.page2 = false; 
      window.history.replaceState(state, '', ''); 
      $('.container').fadeOut(); 
     } 
     if (state.page2) { 
      state.page1 = false; 
      state.page2 = true; 
      window.history.replaceState(state, '', ''); 
      $('.container').fadeIn(); 
     } 
    }; 
})