Question

I am building a Phonegap application for my client and all pages are created using jquerymobile. I have a consistent header and footer for the application using data-role=header and similarly footer. However, on footer I have links like FAQ, Contact Us which point to a standard webpage of the company that I have no control of.

Problem: When the user clicks on a link (e.g. FAQ), it loads the FAQ page from the company and it doesn’t have the standard header and footer I created. On iPhone since there is no back button, there is no way for the user to go back to the previous page.

Is there a way to create or use the Header that I have and have a back button in the header so the user can go back to the previous screen?
My constraints: Want to avoid native code as much possible due to client’s policy, Donot have access to modify the clients FAQ/Contact Us pages.

Answer 1

Clicking a link, will load a new page in your webview. This is the default behaviour. Instead you can catch the on click event (preventing default) on your link and add an Ajax call in order to retrieve the FAQ page. Then you can display the result in a custom div.
Something like:

$.get('faq.html', function(data) {
            $('#yourcontainer').html(data);    
}