La aplicación web iPhone Safari abre enlaces en una nueva ventana

Tengo un problema con la web después de agregar el icono a la pantalla de inicio. Si la web se inicia desde la pantalla de inicio, todos los enlaces se abrirán en una nueva ventana en Safari (y perderán la funcionalidad de pantalla completa). ¿Cómo puedo prevenirlo? No pude encontrar ayuda, solo la misma pregunta sin respuesta.

Encontré la solución de JavaScript en el marco de iWebKit :

var a=document.getElementsByTagName("a");
for(var i=0;i<a.length;i++)
{
    a[i].onclick=function()
    {
        window.location=this.getAttribute("href");
        return false
    }
}

Las otras soluciones aquí no tienen en cuenta los enlaces externos (que probablemente desee abrir externamente en Safari) o no tienen en cuenta los enlaces relativos (sin el dominio en ellos).

El proyecto html5 mobile-boilerplate enlaza con esta esencia que tiene una buena discusión sobre el tema: https://gist.github.com/1042026

Aquí está el código final que se les ocurrió:

<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>

Si está utilizando jQuery, puede hacer:

$("a").click(function (event) {
    event.preventDefault();
    window.location = $(this).attr("href");
});

Esto funciona para mí en iOS 6.1 y con enlaces Bootstrap JS (es decir, menús desplegables, etc.)

$(document).ready(function(){
    if (("standalone" in window.navigator) && window.navigator.standalone) {
      // For iOS Apps
      $('a').on('click', function(e){
        e.preventDefault();
        var new_location = $(this).attr('href');
        if (new_location != undefined && new_location.substr(0, 1) != '#' && $(this).attr('data-method') == undefined){
          window.location = new_location;
        }
      });
    }
  });

Esta es una vieja pregunta y muchas de las soluciones aquí están usando JavaScript. Desde entonces, se ha lanzado iOS 11.3 y ahora puede usar el miembro de alcance . El miembro de ámbito es una URL como "/"donde todas las rutas bajo ese ámbito no abrirán una nueva página.

El miembro de ámbito es una cadena que representa el ámbito de navegación del contexto de aplicación de esta aplicación web.

Aquí está mi ejemplo:

{
  "name": "Test",
  "short_name": "Test",
  "lang": "en-US",
  "start_url": "/",
  "scope": "/",
  ...
}

También puede leer más sobre esto aquí . También recomiendo usar el generador que proporcionará esta funcionalidad.

Si especifica el alcance, todo funciona como se esperaba similar a Android, los destinos fuera del alcance se abrirán en Safari, con un botón de retroceso (el pequeño en la barra de estado) a su PWA.

Según la respuesta de Davids y el comentario de Richards, debe realizar una verificación de dominio. De lo contrario, los enlaces a otros sitios web también se abrirán en su aplicación web.

$('a').live('click', function (event)
{      
    var href = $(this).attr("href");

    if (href.indexOf(location.hostname) > -1)
    {
        event.preventDefault();
        window.location = href;
    }
});

Si usa jQuery Mobile, experimentará la nueva ventana cuando use el atributo data-ajax = 'false'. De hecho, esto sucederá siempre que ajaxEnabled esté desactivado, por un enlace externo, por una configuración $ .mobile.ajaxEnabled o por tener un atributo target = ''.

Puedes arreglarlo usando esto:

$("a[data-ajax='false']").live("click", function(event){
  if (this.href) {
    event.preventDefault();
    location.href=this.href;
    return false;
  }
});

(Gracias a Richard Poole por el método live (), no funcionaba con bind ())

Si ha desactivado ajaxEnabled globalmente, deberá soltar [data-ajax = 'false'].

Esto me tomó bastante tiempo para darme cuenta, ya que esperaba que fuera un problema específico de jQuery Mobile donde, de hecho, fue el enlace Ajax lo que realmente prohibió la nueva ventana.

Este código funciona para iOS 5 (funcionó para mí):

En la etiqueta de la cabeza:

<script type="text/javascript">
    function OpenLink(theLink){
        window.location.href = theLink.href;
    }
</script>

En el enlace que desea que se abra en la misma ventana:

<a href="(your website here)" onclick="OpenLink(this); return false"> Link </a>

Obtuve este código de este comentario: metaetiquetas de aplicaciones web para iPhone

Tal vez debería permitir abrir enlaces en una nueva ventana cuando el objetivo también se establezca explícitamente en "_blank":

$('a').live('click', function (event)
{      
    var href = $(this).attr("href");

    // prevent internal links (href.indexOf...) to open in safari if target
    // is not explicitly set_blank, doesn't break href="#" links
    if (href.indexOf(location.hostname) > -1 && href != "#" && $(this).attr("target") != "_blank")
    {
        event.preventDefault();
        window.location = href;
    }

});

He encontrado uno que es muy completo y eficiente porque comprueba que se ejecuta solo bajo una aplicación web independiente, funciona sin jQuery y también es sencillo, solo probado en iOS 8.2:

Manténgase independiente: evite enlaces en aplicaciones web independientes que abran Mobile Safari

También puedes hacer enlaces casi normalmente:

<a href="#" onclick="window.location='URL_TO_GO';">TEXT OF THE LINK</a>

Y puede eliminar la etiqueta hash y href, todo lo que hace afecta la apariencia.

Esto es lo que funcionó para mí en iOS 6 (muy leve adaptación de la respuesta de rmarscher):

<script>                                                                
    (function(document,navigator,standalone) {                          
        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;                         
                }                                                       
                if ("href" in curnode && (curnode.href.indexOf("http") || ~curnode.href.indexOf(location.host)) && curnode.target == false) {
                    e.preventDefault();                                 
                    location.href=curnode.href                          
                }                                                       
            },false);                                                   
        }                                                               
    })(document,window.navigator,"standalone")                          
</script>

Esta es una versión ligeramente adaptada de Sean que impedía el botón de retroceso

// this function makes anchor tags work properly on an iphone

$(document).ready(function(){
if (("standalone" in window.navigator) && window.navigator.standalone) {
  // For iOS Apps
  $("a").on("click", function(e){

    var new_location = $(this).attr("href");
    if (new_location != undefined && new_location.substr(0, 1) != "#" && new_location!='' && $(this).attr("data-method") == undefined){
      e.preventDefault();
      window.location = new_location;
    }
  });
}

});

Para aquellos con Twitter Bootstrap y Rails 3

$('a').live('click', function (event) {
  if(!($(this).attr('data-method')=='delete')){
    var href = $(this).attr("href");
    event.preventDefault();
    window.location = href; 
  }   
});

Eliminar enlaces todavía funcionan de esta manera.

Prefiero abrir todos los enlaces dentro del modo de aplicación web independiente, excepto los que tienen target = "_ blank". Usando jQuery, por supuesto.

$(document).on('click', 'a', function(e) {
    if ($(this).attr('target') !== '_blank') {
        e.preventDefault();
        window.location = $(this).attr('href');
    }
});

Una solución alternativa que utilicé para una aplicación web iOS fue que hice que todos los enlaces (que eran botones de CSS) formaran botones de envío. Así que abrí un formulario que se publicó en el enlace de destino, luego ingresé type = "submit" No es la mejor manera, pero es lo que descubrí antes de encontrar esta página.

Creé un paquete instalable de Bower a partir de la respuesta de @ rmarscher que se puede encontrar aquí:

http://github.com/stylr/iosweblinks

Puede instalar fácilmente el fragmento con Bower usando bower install --save iosweblinks

Para aquellos que usan JQuery Mobile, las soluciones anteriores rompen el diálogo emergente. Esto mantendrá los enlaces dentro de la aplicación web y permitirá ventanas emergentes.

$(document).on('click','a', function (event) {
    if($(this).attr('href').indexOf('#') == 0) {
        return true;
    }
    event.preventDefault();
    window.location = $(this).attr('href');     
});

También podría hacerlo por:

$(document).on('click','a', function (event){
    if($(this).attr('data-rel') == 'popup'){
        return true;
    }
    event.preventDefault();
    window.location = $(this).attr('href');     
});

Esto es lo que usaría para todos los enlaces en una página ...

document.body.addEventListener(function(event) {
    if (event.target.href && event.target.target != "_blank") {
        event.preventDefault();
        window.location = this.href;                
    }
});

Si está utilizando jQuery o Zepto ...

$("body").on("click", "a", function(event) {
   event.target.target != "_blank" && (window.location = event.target.href);
});

Simplemente puede eliminar esta metaetiqueta.

<meta name="apple-mobile-web-app-capable" content="yes">