Back button hack for webapps built on a single HTML page.

   At the outset, let me start with some background of why anyone would like to do this stuff of virtually making back button work for a webapp wherein a single HTML file you have many sections[modelled as pages in app].
The theory for this goes as follows. If you are developing a web app/widget for mobile using HTML, CSS and Javascript and you want to put all the app logic and navigation in a single HTML page, but still would like to have many pages in your app and from anypage in app on pressing browser back, you want to goto its previous page[previous page of app and not of browser] this solution will be a beacon for you.

The procedure goes as follows:
- Have each section tag [a new addition in HTML5] that will be a page in your app.
- At any given Instance, all other div's will be hidden other than the one you want to see.
// Javascript code to Hide all divs and Show one of them


hide_all(){
for(i=0;i<document.getElementsByTagName("section").length;i++)
   document.getElementsByTagName("section")[i].style.display = "none";
}


show_one(secNo){
   document.getElementsByTagName("section")[secNo].style.display = "none";
}


Hence, at any given instance of time if you want display the 3rd section(page) in your app, using above 2 functions:


hide_all();
show_one();
- Using above logic, you can simulate multiple pages in a single HTML file.
- Now comes a scenario when you are in some page and when you press browser back, you want to go to the previous section.
- For this, there are 2 ways of doing things. First way is to use window.onpopstate/pushstate (will not work in some desktop browsers and even many mobile phone browsers) so, the other way is to hack the browser, fake it by doing a URL rewriting for every page/section of the app.
- URL rewriting is a logical solution and has no dependencies as in window.onpopstate.
- explanation is given below:
Consider my base URL is http://noddycha.com/trial.html
URL rewriting can be done using the Javascript code - window.location.href = "#" + pageNavname;
where, pageNavname will be id of the section you want to goto. if i have declared pageNavname="chatPage"; by using above code, my URL will be http://noddycha.com/trial.html#pageNavname. But, you will remain on the same page.
- similarly have as many number of pageNavname as those of your sections. 
- Rewrite URL as specified above for every navigation.
- But when you come back to a URL on pressing back, you need to hide all other sections and show the section as in the end of URL after "#".
- To do this, you need to do something as below:


// Check if there is a change in URL using onhashchange.
window.onhashchange = reNewApp;


and in reNewApp you need to do something as below:



function reNewApp()
{
switch(getpageNavName())
{
case ' homepage ': hide_all(); show_one("homepage");break;
case ' prechatform ': hide_all(); show_one("prechatform");break;
case ' chatpage ': hide_all(); show_one("chatpage");break;
case 'nav_feedbackPageLive': hide_all(); show_one("feedbackpagelive");break;
default: hide_all(); show_one("homepage");break;
}
}


To get the app page to be displayed or section id to be displayed, look at the code below:

// You get the PageName/section name from the URL by parsing URL of the window as below:

function getpageNavName()

{

hide_all();

var navURL = document.location.href;

var URLlength = navURL.length;

var startPos = navURL.search("#");

if(startPos)

{

return pageNavName = navURL.substr(startPos+1,URLlength);

}

}

Finally, you will end up in a app where in a single HTML page will have multiple pages and back button of browser will not take you out of app(HTML page), but will take you to previous section.


You can see a working demo @ http://samplewac.freeiz.com/247ilabs/

Cheers,
noddyCha