Question

I have a HTML+CSS mobile website (not a real app) that is supposed to look as much as possible like a real one. Once the website home screen is bookmarked it comes up minus the bottom navigation bar, which is the desired result, however it’s my understanding that if the user navigates to another page within the website the nav bar will appear (technically speaking it is switching from embedded webkit to Safari).

My question is whether this interpretation is correct and if so is AJAX the only way to prevent it? Can I load content in frames/iframes without launching Safari? Can I change window.location or some other trick?

My basic problem is that the webapp was designed using jQuery mobile which seems to handle these issues for you but the library is difficult to work with, has some bizarre CSS caching issues and seems to break jQuery Tools “scrollable” plugin. I want a more “low-level” approach, not another framework or toolkit. Being a real “app” is also not an option right now.

Note that for this webapp there is no conceivable need for the safari toolbar. At the point where this matters the site is already bookmarked and navigation is simple enough to negate the need for back/forward buttons. Please refrain from commenting on the usability of this, it’s a basic requirement of this project that the navigation bar remains hidden after launching from the home screen.

Answer 1

After testing it turns out the solution is changing <A> tags as follows:

<a href="/url">

… to …

<a onclick="window.location='/url'">

The HREF must be removed completely. Even a link to a named anchor like href="#top" is enough to trigger Safari and I suspect even href="" is too much.