CODEWITHSUNDEEP
jqueryajaxhtmlpushstate
cmplieger
cmplieger

Reputation: 7351

window.history.pushState not going back in history

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

    });

Upvotes: 4

Views: 15025

Answers (3)

cmplieger
cmplieger

Reputation: 7351

Figured it out, I just added:

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

to the end of the page

Upvotes: 14

Avtandil Kavrelishvili
Avtandil Kavrelishvili

Reputation: 1757

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

code example:

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

Upvotes: 2

balupton
balupton

Reputation: 48620

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.

Upvotes: 1

Related Questions