Geek asks and answers

Window.history.pushState does not return to history

I have a little problem with the history.pushstate event. I configured it so that the URL of the page is the actual URL of the page loaded via AJAX, and this works fine.

I realized that it should automatically create a story by loading previously loaded pages. an unhappy hat does not happen, and when I press the back button, the URL changes, but not the page. Could you help me? Here is my simplified code:

    function hijackLinks() {
        $('a').live("click", function (e) {
            e.preventDefault();
            loadPage(e.target.href);    
            direction = $(this).attr('class');        
        });   
    }


    function loadPage(url) {
        if (url === undefined) {
            $('body').load('url', 'header:first,#content,footer', hijackLinks);
        } else {
            $.get(url, function (data) {
                $('body').append(data);
                 window.history.pushState(url, url, url);

                if (direction === "leftnav") {
                   //DO STUFF
                }
                if (direction !== "leftnav") {
                   //DO STUFF
                }

                setTimeout(function () {
                  //DO STUFF
                },1000);
            });
        }
    }
    $(document).ready(function () {
        loadPage(); 

    });
+3
source share
3 answers

Understood, I just added:

    window.addEventListener("popstate", function(e) {
    loadPage(location.pathname);
});

to the end of the page

+14
source

I have the same problem, but I fixed it. It is very easy

Code example

:

window.addEventListener("popstate", function(e) {
    window.location.href = location.href;
});
+2
source

Yeah Safari iOS has a few bugs with the HTML5 history API - in fact, all HTML5 browsers work differently, so the functionality is actually not that standard.

There is History.js that solves cross-browser compatibility issues, and also provides an additional HTML4 hash code if you want. You can also refer to the “Compatibility Notes” section for information on all browser errors that it fixes.

+1
source

More articles:


All Articles