Code Responsible

Skip navigation

How to keep an iPhone/iPad web app in full screen mode

iphone home screenSafari on the iPhone/iPad allows the user to add websites to their Home Screen to make it easier to launch. This can be very useful when developing a web-based application for iOS devices. By using this option your website will launch in fullscreen mode, allowing more screen real-estate and feel more like an application.

Unfortunately an issue occurs when launching a web-based application from the Home Screen, any links clicked will open in a new window in safari. This defeats the purpose of launching in fullscreen mode.

Fortunately there is a simple JavaScript solution to prevent the application from launching in a new Safari window. The JavaScript function below prevents all links from opening in a new window. The only exception is any link that you’ve specified as being target= “_blank”, those will open in Safari.

This solution came in handy when I was tasked to create an iPad kiosk web-based application for a client. We needed a way to to prevent external websites from launching in a new window in Safari. This JavaScript function solved our issue.

/* prevent links from opening in a new browser on iPad full screen mode */
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;
        }
    }
}

41 Posts

Ryan Burgess

Ryan Burgess is a Manager, UI Engineering at Netflix in San Francisco, California. Previously at Evernote. Listen to Ryan on the Front End Happy Hour podcast. He's also the creator of SensesLost.com, an online-based arts and culture magazine that focuses on graffiti and tattoo art.

5 Responses to “How to keep an iPhone/iPad web app in full screen mode”

Leave a Reply

Comment Form