Question

I have an HTML5 iPad app that works offline. The app essentially consists of 4 html files and 3 aspx files. My cache manifest is setup so that only the html files are available offline, and the aspx files require a network connection. This is all working great!

Now, I’ve gotten to the point where I’m putting the finishing touches on the app and trying to finalize the home screen icons, running in full screen mode, etc. I’ve added what I believe are the necessary meta tags to make the app initially launch in full screen mode once it’s been added to the home screen. The reason I believe the tags are correct is that the app will (correctly) launch and stay in full screen mode if I navigate back and forth between the html pages. The problem I’m having is getting the app to stay in full screen mode when one of the server (aspx) links are clicked.

When a server link (aspx) is clicked Mobile Safari kicks out into full browser mode and opens a new window. This behavior is not acceptable and I’m hoping that I’m missing something simple here.

Here are the meta tags I’m using on all of my pages (html + aspx):

  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />

Hopefully this provides all of the necessary information needed to understand the problem. I have seen other links on here stating that ANY page other than the one bookmarked on the home page causes some folks to exit full screen mode. This is not the problem I’m having, so I wanted to start a new discussion. Again, I feel that if I had 5 more html pages in the app it would continue to stay in full screen mode. The aspx pages are the problem in my situation.

Answer 1

Let the computer do the tedious job, that’s what they’re made for.

This is a piece of javascript code I use to avoid rewriting all my links. With that, only those links that have an explicit target = "_blank" attribute will open in Safari. All other links will remain inside the web app.

var a=document.getElementsByTagName("a");
for(var i=0;i<a.length;i++) {
    if(!a[i].onclick && a[i].getAttribute("target") != "_blank") {
        a[i].onclick=function() {
                window.location=this.getAttribute("href");
                return false; 
        }
    }
}