jQuery ajax中的哈希和pushstate

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

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

                }
            });

   }

我还添加了哈希，该哈希向网址添加了哈希标签和数字值

这是插件代码https://plnkr.co/edit/tTMzTFIHD03pkIt4CkHO?p=preview

但是，当我单击浏览器的后退按钮时，它必须重新加载以前的ajax内容。 即，如果我单击inbox ，它将显示inbox data ，然后单击“ sent ，它将显示已sent data ，然后，当我单击浏览器的“后退”按钮时，它必须显示收件箱内容，即收件inbox data即先前的内容。

我了解了如何使用哈希更改网址。 但是我无法理解，也找不到合适的示例来推送状态，即往回推送历史/显示以前的ajax内容。

我检查了各种例子。 但是我不明白如何使用散列来加载ajax内容。

请帮忙 ！！！ 提前致谢 ！！！

Answer 1

您尚未将任何功能绑定到主题标签更改事件。 在JavaScript中，您可以使用此事件再次触发AJAX调用：

window.onhashchange = doThisWhenTheHashChanges;

参见Mozilla

您还可以通过此JQuery 库查看哪些地址解决了跨浏览器兼容性问题以及替代解决方案的完整列表。