window.history.pushState not going back in history

Question

I have a little problem experimenting with the history.pushstate event. I set it up so that the url of the page would be the actual URL of the page loaded via AJAX and that works just fine.

I understood that it should automaticaly create a history, loading the pages previously loaded. unfortunatly hat doesn't happen and when i click back of forward the url does change but not the page. Can 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(); 

    });

Solution 1

Figured it out, I just added:

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

to the end of the page

Solution 2

I have same problem, but I fixed it. It's very easy

code example:

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

Solution 3

Yeah Safari iOS has a fair few bugs with the HTML5 History API - actually, all the HTML5 browsers work differently than each other, so the functionality isn't really that standard right now.

There is History.js which solves the cross-browser compatibility problems and also provides an optional HTML4 hash fallback if you'd like. You can also refer to the "Notes on Compatibility" section for information on all the browser bugs that it fixes.