HTML5/jQuery: pushState and popState - deep linking?

Question

first off I can't seem to figure what the first parameter in the pushState function is for? What do I pass to it? I simply want to change the url when scrolling through my page. I'm querying the ID of the current element in the viewport and its ID should also be the link in the url. That works fine with the code below.

var currentHash,
        url;

    if (history && history.pushState) {

        $(window).scroll(function() {
            hash = $('.layer:in-viewport').attr('id');
            catHash = $("#"+hash).parent('section').attr('id');

            var data = "nothing";

            if ( catHash != undefined )
                url = "/" + catHash + "/" + hash;
            else
                url = "/" + hash;

            if ( currentHash != hash ) {

                window.history.pushState(data, hash, url);

            }

            currentHash = hash;

        });

    }

Now I have two questions:

1.) Right now the url in the addressbar changes successfully when I scroll through my page. How can I query the url/hash in the addressbar when I initially load the page. So imagine I have now a link like www.url.com/deep I want to find out what /deep is? Do I simply have to query the entire top.location and split it on each "/"? I mean those links are actually not existing, so how do I avoid 404 pages when calling a url that I manipulated with the pushState function?

2.) How can I find out the last change in the addressbar when clicking the back button? So I want to find /deep when clicking on the browser back button so I can navigate back to that position on the page. I guess this is probably working with popstate but I couldn't find out how!

Thank you for your help!

Update:

window.history.pushState("test", hash, url);

…

$(window).bind('popstate', function(event){
        console.log(event.data);
    });

This is alway null. Shouldn't this return "test"?

Answer 1

what the first parameter in the pushState function is for?

From the documentation

state object — The state object is a JavaScript object which is associated with the new history entry created by pushState(). Whenever the user navigates to the new state, a popstate event is fired, and the state property of the event contains a copy of the history entry's state object.

So it is a bundle of data of your choice that you get back when you return to that state.

Right now the url in the addressbar changes successfully when I scroll through my page. How can I query the url/hash in the addressbar when I initially load the page.

Look at the location object … but you don't need to. You can (and should) populate the page server side. This is one of the advantages of pushState, the link still works if JavaScript is not available and the server side fallback is smoothly integrated.

How can I find out the last change in the addressbar when clicking the back button?

You add an event listener (looking for a popState event), and the data you stored in it will be available on the event object. MDN has an example

Answer 2

jQuery abstracts out the event object, you want: event.originalEvent.state;