I am using JQueryMobile for building website that works on Mobile, tablet, and desktop computers.<\/p>\n
As my application is an Ajax application. I wanted to control the browser URL in order to enable browser back\/forward button in my Ajax single-page application.<\/p>\n
The solution is really easy, whenever you want to change the location call<\/p>\n
location.hash = “456”;<\/p>\n
This will update browser URL as following:<\/p>\n
http:\/\/mysite.com\/myfolder\/index.html#456<\/p>\n
Of course passing your own application specific hash<\/p>\n
Whenever the user click back or forward, you need to handle the following event:<\/p>\n
window.onhashchange = function () {<\/span> Until now everything is perfect. But if you are using JQM (JqueryMobile) you will face trouble. The best workaround for this is to let JQM leave location.history alone. This can be easily done by:<\/p>\n <\/span>$.mobile.changePage(“#my-page”, {changeHash: false});<\/span><\/p>\n As you see, the second parameter is an object with many option, what we need here is:<\/p>\n changeHash: false<\/span><\/p>\n And viola, now you have full control of your location hash.<\/p>\n What is a downside is that it will impose burden on you to control all page\/dialogue changes yourself. you can not simply use:<\/p>\n
\n
<\/span>
\n \/\/Use location.hash and update your application display as you need<\/span>
\n
<\/span>
\n};<\/span><\/p>\n
\nJQM uses hash to manage the transition between multiple pages and dialogues. While doing so, it update the localtion.hash.<\/p>\n