Ajax 调用上的 pushState？

Question

My client is tormenting me to be able to go back to a 'previous page' using the browser back button. The thing is that this 'pages' are being called via Ajax to a modal window that displays the content. I'm doing an ajax call and I found that pushState will be my solution, but I really don't get it. I found stuff where there's not even a bit of ajax, it's all javascript.. So, what should I do to add pushState to an ajax call? Is that even possible? Or should I just a find a way to make it work with Ajax?

I found this thing called Pjax but I really don't get it. My ajax call looks something like this;

$(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();
});

I'm sorry if someone else already created something like this, but I didn't find anything useful

Answer 1

You can do a pushState at any stage you'd like in the code you provided, depending on when do you want the history to be manipulated.

You can just do history.pushState([data], [title], [url]); (with appropriate values as parameters) just after a successful ajax form return and before replacing the html content like this:

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

There might be an issue depending on the UX you've set up, if a user is accessing pages continuously by ajax calls and there are no URLs to reflect the previous page or 'state' in that case, then this solution probably won't work for you.

History manipulation functions like pushState only change the browser history, they don't control what happen when someone clicks the 'back' button.

If there are no pages being loaded with URLs in your setup then you might need to control what happens when a user clicks the 'back' button, by doing another ajax call and loading the previous content (you got to keep track of the changes in content). If that is your scenario, this might help you getting started: https://stackoverflow.com/a/25806609/4283725

Answer 2

The best solution is I think use a javascript component that handles this for you. I use for example Barba.js. Thats a component that used PJAX.