StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHTML5/jQuery: pushState and popState - deep linking?
text
Body
copied!<p>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.</p> <pre><code>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; }); } </code></pre> <p>Now I have two questions:</p> <p>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 <code>www.url.com/deep</code> 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?</p> <p>2.) How can I find out the last change in the addressbar when clicking the back button? So I want to find <code>/deep</code> 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!</p> <p>Thank you for your help!</p> <p>Update: </p> <pre><code>window.history.pushState("test", hash, url); </code></pre> <p>…</p> <pre><code>$(window).bind('popstate', function(event){ console.log(event.data); }); </code></pre> <p>This is alway null. Shouldn't this return "test"?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload