ios - smart - duplicar pantalla iphone sin apple tv
¿Cómo se puede mantener una aplicación web para iPhone/iPad en modo de pantalla completa? (6)
Tengo una aplicación de iPad HTML5 que funciona sin conexión. La aplicación consiste esencialmente en 4 archivos html y 3 archivos aspx. Mi manifiesto de caché está configurado para que solo los archivos html estén disponibles sin conexión y los archivos aspx requieran una conexión de red. ¡Todo está funcionando bien!
Ahora, llegué al punto en el que estoy dando los toques finales a la aplicación y tratando de finalizar los íconos de la pantalla de inicio, ejecutándome en modo de pantalla completa, etc. Agregué lo que creo que son las metaetiquetas necesarias para haga que la aplicación se inicie inicialmente en modo de pantalla completa una vez que se haya agregado a la pantalla de inicio. La razón por la que creo que las etiquetas son correctas es porque la aplicación se lanzará (correctamente) y permanecerá en modo de pantalla completa si navego hacia adelante y hacia atrás entre las páginas html. El problema que tengo es hacer que la aplicación permanezca en modo de pantalla completa cuando se hace clic en uno de los enlaces del servidor (aspx).
Cuando se hace clic en un enlace de servidor (aspx) Mobile Safari se inicia en el modo de navegador completo y se abre una nueva ventana. Este comportamiento no es aceptable y espero que me falta algo simple aquí.
Aquí están las meta etiquetas que estoy usando en todas mis páginas (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" />
Esperemos que esto proporcione toda la información necesaria para comprender el problema. He visto otros enlaces aquí que indican que CUALQUIER página que no sea la marcada en la página de inicio hace que algunas personas salgan del modo de pantalla completa. Este no es el problema que tengo, así que quería comenzar una nueva discusión. Nuevamente, creo que si tuviera 5 páginas html más en la aplicación, continuaría estando en modo de pantalla completa. Las páginas aspx son el problema en mi situación.
Agregar esto al archivo de índice hará el truco.
<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>
Aquí hay un complemento jQuery que podría ayudar: https://github.com/mrmoses/jQuery.stayInWebApp
Es una solución de JavaScript similar, pero tiene algunas características más. Por defecto, se adjuntará a todos los enlaces, pero puede usarlo para adjuntarlo a enlaces con una determinada clase o algo. También detecta el modo de pantalla completa de iOS para que no se interponga en el camino de otros navegadores y dispositivos.
Deje que la computadora haga el trabajo tedioso, para eso están hechos.
Esta es una pieza de código javascript que utilizo para evitar volver a escribir todos mis enlaces. Con eso, solo aquellos enlaces que tengan un atributo target = "_blank" explícito se abrirán en Safari. Todos los otros enlaces permanecerán dentro de la aplicación web.
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;
}
}
}
El problema con la solución de KPM es que interfiere con todos los enlaces en todas las páginas de su aplicación, lo que a veces causa errores difíciles de encontrar, especialmente si su aplicación es muy intensa. Encontré una solución mucho mejor here en github.
Estoy reproduciendo el siguiente código por conveniencia:
(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'');
En mi experiencia, cualquier enlace externo parece hacer que la aplicación salte del modo de pantalla completa. Una solución es administrar su navegación usando javascript y el objeto de ubicación. Como sigue:
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
}
Sé que es un dolor tener que volver a trabajar sus enlaces de esta manera, pero es la única forma que he encontrado para resolver el problema al que se enfrentan.
La solución con la que me he establecido es Waypoints para manejar enlaces internos. Tiene un método open () para enlaces externos que funciona hasta iOS 6. Después de lo cual necesita esta otra solución para 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);
}
}
});
También hay Swipy.js que deberías consultar, incluye Waypoints como biblioteca y podría incluir todo este manejo de enlaces y la solución iOS 7 si es que vale la pena.