javascript - que - Cómo abrir Safari desde una aplicación web en iOS 7

javascript no funciona en ipad

Question

En versiones anteriores de iOS, las etiquetas <a> abrían Mobile Safari, y usted tenía que interceptarlas para quedarse dentro de la aplicación web (una página HTML que el usuario había guardado en la pantalla de inicio).

A partir de iOS 7, todos los enlaces permanecen dentro de la aplicación web. No puedo entender cómo abrir Safari, cuando realmente lo quiero.

He intentado usar window.open y a target="_blank" pero ninguno funciona.

Aquí hay una muestra. https://s3.amazonaws.com/kaontest/testopen/index.html

Si guarda eso en su pantalla de inicio en iOS 6, el enlace se abre Safari. Pero en iOS 7, no es así.

Tenga en cuenta que esta es la pregunta OPUESTA que todo el mundo suele preguntar ("cómo NO abrir Safari"). Ese comportamiento parece ser el nuevo predeterminado, ¡y no puedo entender cómo recuperar el comportamiento anterior!

Answer 1

ACTUALIZACIÓN Simplemente quería que cualquiera que siga esto sepa que iOS 7.0.3 parece solucionar el problema. Mantengo las aplicaciones web guardadas para probar y la actualización lanzada hoy restableció la funcionalidad de enlace / aplicación externa. Así que actualicé mi código para que los clientes supieran actualizar sus teléfonos en lugar de eliminar y volver a guardar la aplicación web.

Iba a agregar un comentario, pero aparentemente esto es demasiado largo.

Apple preparó el escenario para un mundo de aplicaciones web cuando permitieron guardar aplicaciones webapps sin brillo en la pantalla de inicio del dispositivo. Este "error" se siente como un gran paso atrás. No parece muy difícil dejar una falla tan grande en un lanzamiento final. Al menos no uno que, una vez que se dan cuenta de ello, no declaran públicamente que están trabajando en una solución para ello, como lo hicieron con los bypass de la pantalla de seguridad. No puedo evitar que esto parezca intencional, aunque no parece haber una razón clara para ello.

Para los desarrolladores que se ocupan de este problema, la única solución que pude encontrar fue

Primero) Establezca la metaetiqueta apple-mobile-web-app-capable en "no" - esto evita que los futuros usuarios se ocupen del problema

2º) Actualizamos el código en nuestra aplicación web para buscar "independiente" y iOS versión 7+. Cuando las condiciones se cumplen, ofrecí una ventana emergente que indicaba el problema y añadía un enlace a esa página y preguntaba a los usuarios por su perdón y solicitaban que copien el enlace y lo peguen en safari.

Envolví el enlace en la etiqueta de borde a borde con saltos de línea arriba y abajo para ayudar a que el proceso de copiar y pegar de la url sea un poco más fácil.

Answer 2

EDITAR: Perdón, leí mal tu problema original. Esta solución fue para abrir un sitio web externo. Las etiquetas A href básicas solían funcionar para abrir enlaces y dejaron de funcionar en iOS7. Esta fue la única forma en que pude lograr que abriera un enlace externo.

Así es como lo hice para trabajar con una aplicación guardada en el escritorio en iOS7.

function openpage()
{
window.open(''http://www.yourlinkhere.com'', ''_blank'');
}

...

<a ontouchstart="openpage();" onclick="openpage();">LINKED TEXT</a>

Sin embargo, el problema es que parece ignorar la opción de destino y la abre en la misma aplicación web de escritorio de pantalla completa y no hay forma de volver atrás que puedo ver.

Answer 3

Este es un problema conocido en los últimos meses de betas. No hay solución alternativa, y por lo que puedo decir, Apple ha guardado silencio sobre cualquier ETA sobre arreglos, o incluso reconociendo que es un error. Los informes de errores se han enviado, pero no se han actualizado / respondido.

Más: http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

Answer 4

Por el momento encontré dos soluciones para este problema, ambas obviamente usando preventDefault en los enlaces externos.

Si está enlazando a otro sitio web o algo para descargar, la única opción que veo es irónico para alertar al usuario de que mantenga el dedo sobre el enlace para obtener el aviso de llamada táctil. Por otra parte, dependiendo de si es un sitio web o un PDF, indíqueles que copien el enlace o, en el caso de un PDF, que lo agreguen a su lista de lectura. Como la alerta y la confirmación de modales también están rotas, deberás implementar tus propias notificaciones modales. Si ya tienes eso, no debería haber tantos problemas.

Actualización [2013-10-25] Al parecer, se ha solucionado en iOS 7.0.3 y los enlaces se abren en Safari ...

Editar [2013-10-05] Aquí es más o menos lo que uso con un modal jQuery UI

// iOS 7 external link polyfill
$(''a[rel=external], a[rel=blank], a[target=_blank], a[href$=".pdf"]'').on(''click'', function(e) {
if (navigator.standalone && /iP(hone|od|ad) OS 7/.test(navigator.userAgent)) {
e.preventDefault(); e.stopPropagation();
var href = $(this).attr(''href'');
var $dialog = $(''<div id="ios-copy"></div>'')
.html(''<p>iOS 7 prevents us from opening external links in Safari, you can continue to the address and risk losing all navigation or you can copy the address to your clipboard by <strong>holding your finger on the link</strong> for a few seconds.</p><p><a style="background-color: rgba(0,0,0,.75); color: #fff; font-size: 1.25em; padding: 1em;" href="'' + href + ''">'' + href + ''</a></p>'')
.appendTo(''body'')
.dialog({
title: ''External link'',
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
}
});

La otra solución es usar ajax o un iframe para cargar el contenido externo, pero a menos que tengas un buen sub-navegador o algo en tu aplicación se verá incompleto. Aquí hay algo parecido a eso.

// iOS 7 external link polyfill
if (/iP(hone|od|ad) OS 7/.test(navigator.userAgent) && window.navigator.standalone) {
$(''a[rel=external], a[href$=".pdf"]'').on(''click'', function(e) {
e.preventDefault(); e.stopPropagation();
var link = this;
var href = $(link).attr(''href'');
var frameContainer = $(''<div></div>'').css({
position: ''absolute'',
left: 10,
top: $(link).position().top,
opacity: 0,
overflow: ''scroll'',
''-webkit-overflow-scrolling'': ''touch'',
height: 520,
transition: ''opacity .25s'',
width: 300
});
var iosFrame = $(''<iframe class="iosFrame" seamless="seamless" width="1024" height="5000"></iframe>'')
.attr(''src'', href)
.css({
height: 5000,
''max-width'': 1024,
width: 1024,
overflow: ''scroll !important'',
''-webkit-overflow-scrolling'': ''touch !important''
});
var iosFrameClose = $(''<a href="#"><i class="icon-cancel icon-remove icon-3x"></i></a>'').css({
position: ''absolute'',
left: -10,
top: $(link).position().top - 20,
''text-shadow'': ''1px 1px 1px #000'',
transition: ''opacity .25s'',
opacity: 0,
''-webkit-transform'': ''translate3d(0, 0, 0)'',
width: ''3em'',
height: ''3em''
}).on(''click'', function(e) {
e.preventDefault();
setTimeout( function() {
$(frameContainer).remove();
$(iosFrameClose).remove();
}, 250);
});
iosFrame.appendTo(frameContainer);
frameContainer.appendTo(''body'');
iosFrameClose.appendTo(''body'');
iosFrame.contents().css({
''-webkit-transform'': ''translate3d(0, 0, 0)''
});
// Show this thing
setTimeout( function() {
$(frameContainer).css({ opacity: 1 });
$(iosFrameClose).css({ opacity: 1 });
}, 1);
});
}

Answer 5

Se ve sospechosamente como un error intencional para limitar la capacidad de las aplicaciones web para publicar anuncios. Tal vez puedas intentar abrir la nueva página en un iframe.

Answer 6

Tal vez deba eliminar la configuración de meta de "apple-mobile-web-app-capable" en el encabezado de page2.html

https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW1

Answer 7

Tener una etiqueta de anclaje con target _blank funcionará en iOS 7.0.3 pero el uso de window.open no funcionará y permanecerá abierto en la vista web en 7.0.3:

window.open(''http://www.google.com/'', ''_blank'');

Answer 8

iOS v7.0.3 lanzado el 10/22/13 soluciona el problema.

Answer 9

Actualización 10/23/13: solucionado en iOS 7.0.3. Agregue un atributo target = "xxx" a sus enlaces para hacer esto. También funciona con mailto: y amigos.

Este es un error en iOS 7.0, 7.0.1 y 7.0.2 y no hay forma conocida de hacerlo.

Es una regresión de versiones anteriores de iOS, donde los enlaces que se abren en Safari funcionan bien. Parece ser parte de un grupo de problemas que giran en torno a la apertura de URL, sin que funcionen esquemas de URL externos (por ejemplo, "mailto:" tampoco funciona).

Los sospechosos habituales de trabajar en torno a un problema como este desafortunadamente no funcionan (por ejemplo, usar un formulario y enviarlo con un objetivo de "_new").

Hay otros problemas graves, como alerta y confirmación de diálogos modales que no funcionan en absoluto.

Puede ser útil enviar estos errores a Apple, http://bugreport.apple.com

Answer 10

window.open(''http://www.google.com/''); // stays in web app view
<a href=''http://www.google.com/'' target=''_blank''>Click Here</a> // opens in safari

Si desea abrir Safari, pero el uso de una etiqueta de anclaje como este no es posible por el motivo que sea, la solución de JavaScript para esta pregunta también se abrirá en Safari .

Answer 11

window.open(''http://www.google.com/'', ''_system'');

esto abrirá la aplicación Safari nativa incluso en la última versión de iOS ...

Feliz codificación !!