Ajax 調用上的 pushState？

Question

我的客戶正在折磨我，讓我能夠使用瀏覽器后退按鈕返回“上一頁”。 問題是這個“頁面”通過 Ajax 被調用到顯示內容的模式窗口。 我正在執行 ajax 調用，我發現 pushState 將是我的解決方案，但我真的不明白。 我發現了一些甚至沒有一點 ajax 的東西，都是 javascript.. 那么，我應該怎么做才能將 pushState 添加到 ajax 調用中？ 這甚至可能嗎？ 或者我應該只是想辦法讓它與 Ajax 一起工作？

我發現了一個叫做 Pjax 的東西，但我真的不明白。 我的 ajax 調用看起來像這樣；

$(function() {
    $('.w-container .w-nav-menu a').click(function() {
        var $linkClicked = $(this).attr('href');
        var $pageRoot = $linkClicked.replace('#', '');
        if (!$(this).hasClass("active")) {
            $(".w-container .w-nav-menu a").removeClass("active");
            $(this).addClass("active");
            $.ajax({
                type: "POST",
                url: "./PATH/load.php",
                data: 'page='+$pageRoot,
                dataType: "html",

                beforeSend: function(){
                        $('#canvasloader-container.wrapper').show();
                    },
                complete: function(){
                        $('#canvasloader-container.wrapper').hide();
                    },                
                success: function(msg){
                    if((msg))
                    {
                        $('.content').html(msg);
                        $('.content').hide().fadeIn();
                    }
                }

            });
        }
    event.preventDefault();
});

如果其他人已經創建了這樣的東西，我很抱歉，但我沒有發現任何有用的東西

Answer 1

您可以在您提供的代碼中的任何階段執行pushState ，具體取決於您希望何時操作歷史記錄。

你可以只做history.pushState([data], [title], [url]); （使用適當的值作為參數）就在成功返回 ajax 表單之后和替換 html 內容之前，如下所示：

success: function(msg){
    if((msg))
    {
        history.pushState([data], [title], [url]); // replace with appropriate values as parameters
        $('.content').html(msg);
        $('.content').hide().fadeIn();
    }
}

根據您設置的用戶體驗，可能存在問題，如果用戶通過 ajax 調用連續訪問頁面，並且在這種情況下沒有反映上一頁或“狀態”的 URL，則此解決方案可能不會為你工作。

像pushState這樣的歷史操作函數只改變瀏覽器歷史，它們不控制當有人點擊“后退”按鈕時會發生什么。

如果在您的設置中沒有加載帶有 URL 的頁面，那么您可能需要通過執行另一個 ajax 調用並加載以前的內容來控制用戶單擊“后退”按鈕時發生的情況（您必須跟蹤內容）。 如果這是您的情況，這可能會幫助您入門： https : //stackoverflow.com/a/25806609/4283725

Answer 2

最好的解決方案是我認為使用一個 javascript 組件來為你處理這個問題。 我使用例如 Barba.js。 那是一個使用 PJAX 的組件。