制作非JavaScript的＃标签JavaScript链接词

Question

Using the following tutorial I want my website to use AJAX to load the content (but also want to be able to use the back button etc. etc): http://www.queness.com/post/328/a-simple-ajax-driven-website-with-jqueryphp

Ofcourse if someone has javascript disabled the website should also work (without Ajax).

The problem however comes when a javascript enabled user sends a link to a non javascript enabled user. Because javascript is disabled it will not handle the #-tag correctly and will just go to the homepage (so linking directly to pages from a javascript user to non-javascript user is impossible). Is there a way to resolve this issue (preferably php or htacces).

Answer 1

HTML5 gives us methods to alter the URL without refreshing the page https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history#Adding_and_modifying_history_entries

This means you can update something without a page refresh but still give the user a url they can bookmark or send to someone else. These urls will work without JavaScript, as long as you have pages at those locations or are catching them with mod_rewrite or similar.

https://github.com/browserstate/history.js is a great little pollyfill which will use the HTML5 history stuff if the browser supports it, otherwise (Internet Explorer) it changes the hash of the url.

Answer 2

Basically, three steps:

• code your "a" tags just normal: <a href='about'>About us</a>
• in your javascript code, intercept all click events on <a> tags and navigate to # + this.href . So when they click the above url, you navigate to site.com/#about instead of site.com/about
• in your javascript code, have a timer function that reads the hash value form the current location and loads a corresponding url (with # removed) via ajax

Since you code your html just as usual, the site remains fully accessible for non-js users, and, more important, for search engines' bots.

In response to the comments I can suggest the following:

• redirect your home page via javascript from just site.com to site.com/js/
• when <a href='about'> is clicked, navigate to site.com/js/#about
• on the "js" page, have something like <a id=about href="/about">click here</a> for non-js users

Answer 3

Why not just build your application normally and then add the AJAX on top, rather than going the other way round and causing more work for yourself?

Ask yourself, why do you need AJAX page transitions? Does your app actually need them, or is it just because you've seen it on another site, like Twitter?