Skip to main content Accessibility Feedback

How to prevent fullscreen web apps from opening links in a new tab on iOS

The other week, someone opened a bug on my toggle tabs plugin because when used in a web app on iOS, the tab links were opening in a new window (breaking the app experience).

This behavior has always struck me as a bug in Apple’s design model. I get why you’d want that for external links, but for internal ones, they should open in-app.

Here’s a really simple way to fix the issue:

var eventHandler = function (event) {
    // Only run for iOS full screen apps
    if (('standalone' in window.navigator) && window.navigator.standalone) {
        // Only run if link is an anchor and points to the current page
        if ( event.target.tagName.toLowerCase() !== 'a' || event.target.hostname !== window.location.hostname || event.target.pathname !== window.location.pathname || !/#/.test(event.target.href) ) return;

        // Open link in same tab
        event.preventDefault();
        window.location = event.target.href;
    }
}
window.addEventListener('click', eventHandler, false);

🚀 Make 2018 the year you master JavaScript! My pocket guides and mini courses are short, focused, and made for beginners. You can do this!

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips