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 庫查看哪些地址解決了跨瀏覽器兼容性問題以及替代解決方案的完整列表。