jQuery ajax中的哈希和pushstate

Question

I have 3 buttons

 <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>

and the divs where the content has to be displayed

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

Onclick of each I am changing the content by calling the respective functions

    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');

                }
            });

   }

I have also added hashing which adds hash tag and a numberical value to the url

Here is the plunker code https://plnkr.co/edit/tTMzTFIHD03pkIt4CkHO?p=preview

But when I click on the back button of browser it must reload the previous ajax content. ie, if I click on inbox , it displays inbox data and next I clicked on sent , it displays sent data , and then when I click the browser's back button it must display inbox content inbox data ie, the previous content.

I understood how to change a url using hashing. But I am unable to understand and also could not find a proper example to pushstate ie push history back / display the pervious ajax content.

I have checked various examples. But I am not understanding how to go to load ajax content using hashing.

Please help !!! Thanks in advance !!!

Answer 1

You've not bound any function to a hashtag change event. In JavaScript you could use this event to fire off the AJAX call again:

window.onhashchange = doThisWhenTheHashChanges;

See Mozilla

There is also this JQuery library you can look at which addresses cross browser compatibility issues and a full list of alternative solutions