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:
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
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
