使用pushState在AJAX网站上创建“链接”会产生404

Question

I currently have my website set up with a single html file that uses on-click javascript functions to display various sections of the site differently as the user navigates around. The main page contains an audio player that I want to keep playing as the user navigates, which is why I've chosen the AJAX route.

I've implemented pushState across the site to produce URLs for each section that the user navigates to. These links don't work.

I have a couple questions regarding this: should I be using pushState to generate these URLs, or am I going about producing links the wrong way? And is there a way I can have a user reload a deeply-embedded page in the site, and then have the page constructed from the javascript somehow server-side?

EDIT: I feel like maybe if I could have all these links routed to a javascript file that then built the appropriate page, maybe that would work? Not sure if that's the way to go about it.

  $('#menu a').click(function() { var page = $(this).attr('href'); history.pushState({}, '', page); $('#news').load('content/' + page + '.php'); return false; }); 

Here's an example of how the menu is running this jQuery function on click, and then using pushState to make a new URL. Then, it loads in content into the #news div from the appropriate php file.

Is there any way I can link to this "state" of the page? I've been reading Jose Maria Arranz Santamaria's "Single Page Interface Manifesto" , which has a lot of great info, but I'm sort of wondering what I should do next.

Answer 1

Pushstate is not the way you should use if the links don't actually work. You can use the hashes to implement this easily. You the event onhashchange .

The hashes are stored in the window.location.hash property. There would be no need to modify the browser history as well.

Refer to onhashchange and Hashes