Using Links in iOS Fullscreen Web Apps

Question

I'm working on a quick landing page to access a number of small, mobile-optimized applications on the same server. Basically the Dashboard pattern. I want to have it on my home screen so that I can get to any of the apps in fullscreen mode rather than in toolbar-heavy mobile Safari. However, when I click on a link, it takes me out of the fullscreen mode into Safari -- exactly what I don't want.

Is there a way (e.g. using an anchor's target attribute) to stay in the fullscreen mode while navigating to a different page? Or should I just throw everything into an <iframe>?

Answer 1

You'll need to intercept the onclick event using some javascript. For example, here's what iWebKit does with the noeffect css class applied to an <a> tag:

window.onload = function () {
    function fullscreen() {
        var a = document.getElementsByTagName("a");
        for (var i = 0; i < a.length;i++) {
            if (a[i].className.match("noeffect")) {
                // Does nothing
            }
            else {
                a[i].onclick = function () {
                    window.location = this.getAttribute("href");
                    return false;
                };
            }
        }
    }
};

Answer 2

Whenever an onclick occurs in mobile Safari, Safari will take it out of fullscreen mode. Form submissions will remain in fullscreen mode, whether POST or GET. If window.location is set via javascript, it will also remain in fullscreen mode.

I prefer delegation to setting an event handler on each anchor. Here's a jQuery example:

$(window).click(handleClick);

function handleClick(e) {
    var target = $(e.target).closest('a');
    if( target ) {
        e.preventDefault();
        window.location = target.attr('href');
    }
}