在页面上导航并返回时的pushState

Question

I am trying out popstate and pushState and I am wondering how to handle off page navigation.

Lets say I have an index page which generates a 'new page' when clicking something and it's loaded in with ajax. With popstate I change the url. In the page loaded are links that go outside of the current 'index' page. When somebody presses back they get a dumped state object.

How to prevent it so it actually loads the url that was given during the pushState?

Thanks in advance.

Answer 1

It seems you're doing something that causes the browser to replace its cached version of your index page with something else. Make sure your server sets the

Vary: Accept

header when returning the index page and later requests. See this Chromium issue for more information.

Answer 2

Have the link also use an anchor so the browser has a reference to fall back on.

Throw one of these at the beginning of each of the pages with a unique name attribute.

So your links would be:

<a href="page.html#first">Load the first page</a>

and the page HTML would have this at the top somewhere:

<a name="first"></a>

Funny you made this post cuz I've got the exact same problem right now with this site I just started making yesterday: http://asims.fleeceitout.com - had to put arrows everywhere to keep people from gettin lost haha. I'll end up taking my own advice here but I'm too lazy for now. Plus I'm trying to see how much of the site I can make without a single <a></a> used.