iPhone Safari Web App apre i collegamenti in una nuova finestra

Ho un problema con il web dopo aver aggiunto l'icona alla schermata principale. Se il web viene avviato dalla schermata principale, tutti i collegamenti si apriranno in una nuova finestra in Safari (e perderanno la funzionalità a schermo intero). Come posso prevenirlo? Non sono riuscito a trovare alcun aiuto, solo la stessa domanda senza risposta.

Ho trovato la soluzione JavaScript nel framework 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
    }
}

Le altre soluzioni qui non tengono conto dei collegamenti esterni (che probabilmente si desidera aprire esternamente in Safari) o non tengono conto dei collegamenti relativi (senza il dominio in essi).

Il progetto html5 mobile-boilerplate si collega a questa sintesi che ha una buona discussione sull'argomento: https://gist.github.com/1042026

Ecco il codice finale che hanno inventato:

<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 stai usando jQuery, puoi fare:

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

Questo funziona per me su iOS 6.1 e con collegamenti Bootstrap JS (ad esempio menu a discesa, ecc.)

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

Questa è una vecchia domanda e molte delle soluzioni qui stanno usando JavaScript. Da allora, iOS 11.3 è stato rilasciato e ora è possibile utilizzare il membro ambito . Il membro dell'ambito è un URL come quello in "/"cui tutti i percorsi nell'ambito non apriranno una nuova pagina.

Il membro scope è una stringa che rappresenta l'ambito di navigazione del contesto dell'applicazione di questa applicazione Web.

Ecco il mio esempio:

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

Puoi anche leggere di più qui . Consiglio anche di utilizzare il generatore che fornirà questa funzionalità.

Se specifichi l'ambito, tutto funziona come previsto simile ad Android, le destinazioni al di fuori dell'ambito si apriranno in Safari - con un pulsante indietro (quello piccolo nella barra di stato) sul tuo PWA.

Sulla base della risposta di Davids e del commento di Richards, è necessario eseguire un controllo del dominio. In caso contrario, verranno aperti anche collegamenti ad altri siti Web nell'app Web.

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

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

Se si utilizza jQuery Mobile, verrà visualizzata la nuova finestra quando si utilizza l'attributo data-ajax = 'false'. In effetti, ciò accadrà ogni volta che ajaxEnabled è disattivato, essendo by e collegamento esterno, tramite un'impostazione $ .mobile.ajaxEnabled o avendo un attributo target = ''.

Puoi risolverlo usando questo:

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

(Grazie a Richard Poole per il metodo live () - non funzionava con bind ())

Se hai disattivato ajaxEnabled a livello globale, dovrai eliminare [data-ajax = 'false'].

Mi ci è voluto un po 'di tempo per capire, poiché mi aspettavo che fosse un problema specifico di jQuery Mobile, dove in realtà era il collegamento Ajax a proibire effettivamente la nuova finestra.

Questo codice funziona per iOS 5 (ha funzionato per me):

Nel tag head:

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

Nel collegamento che si desidera aprire nella stessa finestra:

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

Ho ottenuto questo codice da questo commento: meta tag per l'app web per iPhone

Forse dovresti consentire di aprire i collegamenti in una nuova finestra quando target è esplicitamente impostato anche su "_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;
    }

});

Ne ho trovato uno che è molto completo ed efficiente perché controlla di essere eseguito solo con WebApp standalone, funziona senza jQuery ed è anche semplice, appena testato su iOS 8.2:

Resta autonomo: impedisce i collegamenti nelle app Web autonome che aprono Mobile Safari

Puoi anche fare il collegamento quasi normalmente:

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

E puoi rimuovere il tag hash e href, tutto ciò che fa influenza l'aspetto.

Questo è ciò che ha funzionato per me su iOS 6 (lievissimo adattamento della risposta di 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>

Questa è una versione leggermente adattata di Sean che stava impedendo il pulsante Indietro

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

});

Per quelli con 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; 
  }   
});

I collegamenti di eliminazione funzionano ancora in questo modo.

Preferisco aprire tutti i collegamenti all'interno della modalità app Web autonoma tranne quelli con target = "_ blank". Usando jQuery, ovviamente.

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

Una soluzione alternativa che ho usato per un'app Web iOS è stata quella di creare tutti i collegamenti (che erano pulsanti tramite CSS) dai pulsanti di invio. Quindi ho aperto un modulo che ha pubblicato sul link di destinazione, quindi input type = "submit" Non è il modo migliore, ma è quello che ho capito prima di trovare questa pagina.

Ho creato un pacchetto installabile pergolato dalla risposta di @ rmarscher che può essere trovato qui:

http://github.com/stylr/iosweblinks

Puoi facilmente installare lo snippet con bower usando bower install --save iosweblinks

Per coloro che utilizzano JQuery Mobile, le soluzioni precedenti interrompono la finestra di dialogo popup. Ciò manterrà i collegamenti all'interno di webapp e consentirà i popup.

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

Potrebbe anche farlo:

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

Ecco cosa userei per tutti i link in una pagina ...

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

Se stai usando jQuery o Zepto ...

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

Puoi semplicemente rimuovere questo meta tag.

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