хеширования и PushState в JQuery AJAX

Question

У меня есть 3 кнопки

<div onclick="javascript:newmessage()" class="mailcontents">New Message</div> 
<div onclick="javascript:inboxmails()" class="mailcontents">Inbox</div> 
<div onclick="javascript:sentmailsbox()" class="mailcontents">Sent</div> 

и дивы, где содержание должно отображаться

<div id="inbox"></div> 
<div id="sent"></div> 

OnClick каждого я изменить содержание, вызвав соответствующие функции

var times = 0; 
    function inboxmails(){ 

     times++; 
location.hash = times; 
     $('#inbox').empty(); 
     $('#sent').empty(); 
     $('#newmessage').empty(); 
     $.ajax({ 
       success: function (data) { 
        $('#inbox').append('inbox data'); 

       } 
      }); 
     } 
    function sentmailsbox(){ 
     times++; 
location.hash = times; 
     $('#inbox').empty(); 
     $('#sent').empty(); 
     $('#newmessage').empty(); 
     $.ajax({ 
       success: function (data) { 
        $('#sent').append('sent data'); 

       } 
      }); 

    } 
    function newmessage(){ 
     $('#inbox').empty(); 
     $('#sent').empty(); 
     $('#newmessage').empty(); 
     $.ajax({ 
       success: function (data) { 
        $('#newmessage').append('new message data'); 

       } 
      }); 

    } 

Я также добавил hashi нг, который добавляет хеш-тег и numberical значения в URL

Вот код plunker https://plnkr.co/edit/tTMzTFIHD03pkIt4CkHO?p=preview

Но когда я нажимаю на задней кнопку браузера он должен перезагрузить предыдущее содержимое АЯКСА. то есть, если я нажму на inbox, то отобразится , а затем я нажал на sent, он отображает sent data, а затем, когда я нажимаю кнопку «Назад» браузера, он должен отображать содержимое входящих сообщений inbox data i.e, предыдущий контент.

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

Я проверил различные примеры. Но я не понимаю, как перейти на загрузку ajax-контента с помощью хэширования.

Пожалуйста, помогите !!! Спасибо заранее!

Answer 1

Вы не связали какую-либо функцию с событием изменения хэштега. В JavaScript вы можете использовать это событие, чтобы выстрелить вызов AJAX снова:

window.onhashchange = doThisWhenTheHashChanges;

См Mozilla

Существует также это JQuery library вы можете посмотреть на котором рассматриваются перекрестные вопросы совместимости браузера и полный список альтернативных solutions