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);