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

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

单击每个我正在通过调用各自的函数来更改内容

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

我还添加了哈希，它将哈希标签和数字值添加到 url

这是 plunker 代码 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库，您可以查看它解决了跨浏览器兼容性问题以及替代解决方案的完整列表。