iPhone Safari Web App abre links em uma nova janela

Tenho um problema com a web depois de adicionar o ícone à tela inicial. Se a web for iniciada na Tela inicial, todos os links abrirão em uma nova janela no Safari (e perderão a funcionalidade de tela cheia). Como posso evitar isso? Não consegui encontrar ajuda, apenas a mesma pergunta sem resposta.

Encontrei a solução JavaScript no quadro do 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
    }
}

As outras soluções aqui não são responsáveis ​​por links externos (que você provavelmente deseja abrir externamente no Safari) ou por links relativos (sem o domínio neles).

O projeto html5 mobile-boilerplate está vinculado a essa essência, que tem uma boa discussão sobre o tópico: https://gist.github.com/1042026

Aqui está o código final que eles criaram:

<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>

Se você estiver usando o jQuery, poderá:

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

Isso está funcionando para mim no iOS 6.1 e com links JS do Bootstrap (ou seja, menus suspensos 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 é uma pergunta antiga e muitas das soluções aqui estão usando javascript. Desde então, o iOS 11.3 foi lançado e agora você pode usar o membro do escopo . O membro do escopo é uma URL como "/"onde todos os caminhos desse escopo não abrirão uma nova página.

O membro do escopo é uma sequência que representa o escopo de navegação do contexto de aplicativo desse aplicativo Web.

Aqui está o meu exemplo:

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

Você também pode ler mais sobre isso aqui . Eu também recomendo usar o gerador que fornecerá essa funcionalidade.

Se você especificar o escopo, tudo funcionará como esperado, semelhante ao Android, os destinos fora do escopo serão abertos no Safari - com um botão voltar (o pequeno na barra de status) no seu PWA.

Com base na resposta de Davids e no comentário de Richards, você deve executar uma verificação de domínio. Caso contrário, os links para outros sites também serão abertos no seu aplicativo da web.

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

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

Se estiver usando o jQuery Mobile, você experimentará a nova janela ao usar o atributo data-ajax = 'false'. De fato, isso acontecerá sempre que o ajaxEnabled for desativado, por um link externo, por uma configuração $ .mobile.ajaxEnabled ou por um atributo target = ''.

Você pode corrigi-lo usando este:

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

(Obrigado a Richard Poole pelo método live () - não estava trabalhando com bind ())

Se você desativou o ajaxEnabled globalmente, precisará remover o [data-ajax = 'false'].

Demorei um pouco para descobrir, pois esperava que fosse um problema específico do jQuery Mobile, onde na verdade era o link do Ajax que realmente proibia a nova janela.

Este código funciona para o iOS 5 (funcionou para mim):

Na tag head:

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

No link que você deseja abrir na mesma janela:

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

Eu recebi esse código deste comentário: iphone web app meta tags

Talvez você deva permitir abrir links em uma nova janela quando o destino também estiver explicitamente definido como "_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;
    }

});

Eu encontrei um que é muito completo e eficiente porque ele verifica se está sendo executado apenas no WebApp autônomo, funciona sem jQuery e também é direto, apenas testado no iOS 8.2:

Mantenha-se independente: evite links em aplicativos Web independentes abrindo o Mobile Safari

Você também pode vincular quase normalmente:

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

E você pode remover a tag hash e o href, tudo o que faz afeta a aparência.

Isto é o que funcionou para mim no iOS 6 (adaptação muito pequena da resposta do 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 é uma versão ligeiramente adaptada do Sean, que estava impedindo o botão Voltar

// 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 aqueles com Twitter Bootstrap e Rails 3

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

Os links de exclusão ainda estão funcionando dessa maneira.

Prefiro abrir todos os links no modo de aplicativo da web independente, exceto os que têm target = "_ blank". Usando jQuery, é claro.

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

Uma solução alternativa que usei para um aplicativo da web para iOS foi que eu criei todos os links (que eram botões por CSS) nos botões de envio de formulário. Então, eu abri um formulário que foi postado no link de destino e digite type = "submit" Não é o melhor caminho, mas foi o que descobri antes de encontrar esta página.

Criei um pacote instalável do bower a partir da resposta do @ rmarscher, que pode ser encontrado aqui:

http://github.com/stylr/iosweblinks

É possível instalar facilmente o trecho com o bower usando bower install --save iosweblinks

Para aqueles que usam JQuery Mobile, as soluções acima quebram o diálogo pop-up. Isso manterá os links no webapp e permitirá pop-ups.

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

Também poderia fazê-lo por:

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

Aqui está o que eu usaria para todos os links em uma página ...

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

Se você estiver usando jQuery ou Zepto ...

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

Você pode simplesmente remover essa metatag.

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