Best IT Recipes

How to save iPhone / iPad web application in full screen?

I have an app for iPad HTML5 that works offline. An application essentially consists of 4 html files and 3 aspx files. My cache manifest is configured so that only html files are available offline, and aspx files require a network connection. It all works great!

Now I have come to the point where I am putting the finishing touches to the application and trying to finalize the icons on the main screen, work in full screen mode, etc. I added what I consider necessary meta tags so that the application initially starts in full screen mode as soon as it is added to the main screen. The reason I believe the tags are correct is because the application will (correctly) run and stay in full screen mode if I move between html pages back and forth. The problem I am facing is to force the application to remain in full screen when one of the links to the server (aspx) is clicked.

When you click on a server link (aspx), Mobile Safari enters full browser mode and opens a new window. This behavior is unacceptable, and I hope that I am missing something simple here.

Here are the meta tags that I use on all 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" />

Hope this provides all the necessary information needed to understand the problem. I saw other links here that say that ANY page, besides the bookmark placed on the main page, causes some people to exit full-screen mode. This is not a problem that I am experiencing, so I wanted to start a new discussion. Again, I feel that if I had 5 more html pages in the application, it would continue to remain in full screen mode. Aspx pages are a problem in my situation.

+31
ios iphone-standalone-web-app
Jun 21 '11 at 17:33
source share
6 answers

Let the computer do the tedious work of what they are made for.

This is the part of javascript code that I use to not rewrite all my links. In this case, only those links that have an explicit attribute target = "_blank" will be opened in Safari. All other links will remain in the web application.

 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; } } }
+28
Sep 12 '11 at 15:59
source share
— -

There is a jQuery plugin here that can help: https://github.com/mrmoses/jQuery.stayInWebApp

Its a similar solution for javascript, but has a few more features. By default, it will be attached to all links, but you can use it to join links with a specific class or something else. It also detects iOS full screen mode so that it does not interfere with other browsers and devices.

+16
Oct 20 '11 at 19:59
source share

In my experience, any external link seems to make the application jump out of full screen mode. One solution is to control your navigation using javascript and a location object. As below:

HTML:

 <a href="javascript:navigator_Go('abc.aspx');">Go</a>

JavaScript:

 function navigator_Go(url) { window.location.assign(url); // This technique is almost exactly the same as a full <a> page refresh, but it prevents Mobile Safari from jumping out of full-screen mode }

I know that it pains me to re-process your links in this way, but this is the only way to find the problem you are facing.

+7
Jul 20 2018-11-11T00:
source share

The problem with the KPM solution is that it interacts with all the links on all pages of your application, which sometimes leads to hard-to-reach errors, especially if your application is ajax intensive. I found a much better solution here on github.

I use the code below for convenience:

 (function(document,navigator,standalone) { // prevents links from apps from oppening in mobile safari // this javascript must be the first script in your <head> if ((standalone in navigator) && navigator[standalone]) { var curnode, location=document.location, stop=/^(a|html)$/i; document.addEventListener('click', function(e) { curnode=e.target; while (!(stop).test(curnode.nodeName)) { curnode=curnode.parentNode; } // Condidions to do this only on links to your own app // if you want all links, use if('href' in curnode) instead. if('href' in curnode && ( curnode.href.indexOf('http') || ~curnode.href.indexOf(location.host) ) ) { e.preventDefault(); location.href = curnode.href; } },false); } })(document,window.navigator,'standalone');
+2
Sep 15 '12 at 10:16
source share

The solution I installed is Waypoints for handling internal links. It has an open () method for external links, which works before iOS 6. Then you need another fix for iOS 7.

 // Internal link handling Waypoints .intercept('a') .ignore('a[rel=external], a[rel=blank], a[target=_blank], a[href$=".pdf"]'); // .resume(); // External link handling... $('a').on('click', function(e) { var href = $(this).attr('href'); if ($(this).is('a[rel=external], a[rel=blank], a[target=_blank], a[href$=".pdf"]') || (href.indexOf('http') >= 0 && href.indexOf(document.location.host) === -1)) { e.preventDefault(); var link = this; if (navigator.standalone) { if (/iP(hone|od|ad) OS 7/.test(navigator.userAgent)) { // iOS 7 external link polyfill e.stopPropagation(); // Your custom dialog code for iOS 7 and external links } else { Waypoints.open(href); } } else { window.open(href); } } });

There is also Swipy.js you should check, it includes waypoints as a library, and I could enable all this link processing and fix iOS 7 if it's worth it.

0
Oct 06 '13 at 10:30
source share

Adding this file to the index will do the trick.

  <head> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-touch-fullscreen" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <script type"javascript="" text"=""> document.addEventListener('DOMContentLoaded', function(){ var updateStatusBar = navigator.userAgent.match(/iphone|ipad|ipod/i) && navigator.appVersion.match(/OS (\d)/) && parseInt(navigator.appVersion.match(/OS (\d)/)[1], 10) >= 7 && window.navigator.standalone; if (updateStatusBar) { document.body.classList.add('platform-ios'); document.body.classList.add('platform-cordova'); } }); </script>

0
Jun 19 '17 at 10:16 on
source share


More articles:


All Articles