jQuery Mobile and URLs

If you've opened test2.html in your browser and played with it, you may have noticed something interesting about the URLs as you navigate. The following is the initial http://localhost/mobile/c2/test2.html URL (the address and folder will, of course, differ on your computer).

After clicking on Products, the URL will change to http://localhost/mobile/c2/products.html. If I click on back and click on learn more, I will get http://localhost/mobile/c2/test2.html#aboutPage.

In both the subpages (the Products page and the About page), the URL was changed by the framework itself. The framework uses history.pushState and history.replaceState in the browsers that support it. For older browsers, or browsers that don't support JavaScript manipulation of the URL, hash-based navigation is used instead. The http://localhost/mobile/c2/test2.html#/mobile/c2/products.html URL is an example of how this link would look.

What's interesting is that, in this bookmark style, test2.html is always loaded first. You could actually build your products.html file to only include p and be assured that if the request was made for products first, it would still render correctly. It's the newer and fancier browsers that have an issue. If you didn't include the proper jQuery and jQuery Mobile includes, when they go directly to products.html, you would end up with a page that has no styles. It's best to simply always include your proper header files (the CSS, the JavaScript, and so on). Any decent editor will provide simple ways to create templates.