iphone - quitar - en safari se abren ventanas solas

iPhone Safari Web App abre enlaces en una nueva ventana

Question

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 ninguna ayuda, solo la misma pregunta sin respuesta.

Answer 1

Encontré una solución de JavaScript en el marco 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
    }
}

Answer 2

Encontré uno que es muy completo y eficiente porque comprueba que se ejecuta solo en WebApp independiente, funciona sin jQuery y también es sencillo, solo probado en iOS 8.2:

Manténgase autónomo: evite enlaces en aplicaciones web independientes que abran Mobile Safari

Answer 3

Esta es una versión ligeramente adaptada de Sean que estaba impidiendo el botón Atrás

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

});

Answer 4

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

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

Aquí está mi ejemplo:

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

También puedes leer más sobre esto here . También recomiendo usar el generator que proporcionará esta funcionalidad.

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

Answer 5

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 quieres 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: etiquetas meta de la aplicación web iphone

Answer 6

Esto es lo que funcionó para mí en iOS 6 (muy ligera 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>

Answer 7

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

Answer 8

Esto funciona para mí en iOS 6.1 y con enlaces de 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;
        }
      });
    }
  });

Answer 9

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 se vincula a 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>

Answer 10

Para aquellos con Twitter Bootstrap and 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 sigue funcionando de esta manera.

Answer 11

Para aquellos que usan JQuery Mobile , las soluciones anteriores rompen el cuadro de diálogo emergente. Esto mantendrá los enlaces dentro de la aplicación web y permitirá las 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'');     
});

Answer 12

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

Answer 13

Según la respuesta de David 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;
    }
});

Answer 14

Si está utilizando jQuery, puede hacer:

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

Answer 15

Si usa jQuery Mobile experimentará la nueva ventana cuando use el atributo data-ajax = ''false''. De hecho, esto sucederá siempre que ajaxEnabled esté desactivado, sea por un enlace externo o 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 de forma global, deberá soltar [data-ajax = ''false''].

Esto me llevó bastante tiempo para descubrir que esperaba que se tratara de un problema específico de jQuery Mobile en el que, de hecho, era el enlace Ajax el que realmente prohibía la nueva ventana.

Answer 16

Tal vez deberías permitir abrir enlaces en una nueva ventana cuando el objetivo también se establece 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;
    }

});

Answer 17

También puede hacer enlaces casi de manera normal:

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

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

Answer 18

Una solución que utilicé para una aplicación web de 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.

Answer 19

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

http://github.com/stylr/iosweblinks

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