iPhone Safari Web App ouvre des liens dans une nouvelle fenêtre

J'ai un problème avec le Web après avoir ajouté une icône à l'écran d'accueil. Si le Web est lancé à partir de l'écran d'accueil, tous les liens s'ouvriront dans une nouvelle fenêtre dans Safari (et perdront la fonctionnalité plein écran). Comment puis-je l'empêcher? Je n'ai trouvé aucune aide, seulement la même question sans réponse.

J'ai trouvé une solution JavaScript dans le 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
    }
}

Les autres solutions ici ne tiennent pas compte des liens externes (que vous souhaitez probablement ouvrir en externe dans Safari) ou ne tiennent pas compte des liens relatifs (sans le domaine en eux).

Le projet html5 mobile-passe-partout est lié à cet essentiel qui a une bonne discussion sur le sujet: https://gist.github.com/1042026

Voici le code final qu'ils ont trouvé:

<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 vous utilisez jQuery, vous pouvez faire:

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

Cela fonctionne pour moi sur iOS 6.1 et avec les liens Bootstrap JS (c'est-à-dire les menus déroulants, 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;
        }
      });
    }
  });

C'est une vieille question et de nombreuses solutions ici utilisent javascript. Depuis lors, iOS 11.3 a été publié et vous pouvez désormais utiliser le membre de l' étendue . Le membre de l'étendue est une URL comme "/"où tous les chemins sous cette étendue n'ouvriront pas une nouvelle page.

Le membre de la portée est une chaîne qui représente la portée de navigation du contexte d'application de cette application Web.

Voici mon exemple:

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

Vous pouvez également en savoir plus ici . Je recommande également d'utiliser le générateur qui fournira cette fonctionnalité.

Si vous spécifiez la portée, tout fonctionne comme prévu, similaire à Android, les destinations hors de la portée s'ouvriront dans Safari - avec un bouton de retour (le petit dans la barre d'état) sur votre PWA.

Sur la base de la réponse de Davids et du commentaire de Richards, vous devez effectuer une vérification de domaine. Sinon, des liens vers d'autres sites Web s'ouvriront également dans votre application Web.

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

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

Si vous utilisez jQuery Mobile, vous rencontrerez la nouvelle fenêtre lors de l'utilisation de l'attribut data-ajax = 'false'. En fait, cela se produira chaque fois que ajaxEnabled est désactivé, par un lien externe, par un paramètre $ .mobile.ajaxEnabled ou en ayant un attribut target = ''.

Vous pouvez le réparer en utilisant ceci:

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

(Merci à Richard Poole pour la méthode live () - ne fonctionnait pas avec bind ())

Si vous avez désactivé ajaxEnabled globalement, vous devrez supprimer [data-ajax = 'false'].

Cela m'a pris assez de temps à comprendre car je m'attendais à ce que ce soit un problème spécifique à jQuery Mobile où en fait c'était la liaison Ajax qui interdisait la nouvelle fenêtre.

Ce code fonctionne pour iOS 5 (cela a fonctionné pour moi):

Dans la balise head:

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

Dans le lien que vous souhaitez ouvrir dans la même fenêtre:

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

J'ai obtenu ce code de ce commentaire: balises meta pour iphone web

Peut-être devriez-vous autoriser l'ouverture de liens dans une nouvelle fenêtre lorsque la cible est également définie explicitement sur "_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;
    }

});

J'en ai trouvé un qui est très complet et efficace car il vérifie qu'il ne fonctionne que sous WebApp autonome, fonctionne sans jQuery et est également simple, juste testé sous iOS 8.2:

Restez autonome: empêchez les liens dans les applications Web autonomes d'ouvrir Mobile Safari

Vous pouvez également créer des liens presque normalement:

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

Et vous pouvez supprimer la balise de hachage et href, tout ce qu'elle fait affecte l'apparence.

C'est ce qui a fonctionné pour moi sur iOS 6 (très légère adaptation de la réponse 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>

Ceci est une version légèrement adaptée de Sean qui empêchait le bouton de retour

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

});

Pour ceux qui ont Twitter Bootstrap et Rails 3

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

Les liens de suppression fonctionnent toujours de cette façon.

Je préfère ouvrir tous les liens à l'intérieur du mode d'application Web autonome, sauf ceux qui ont target = "_ blank". En utilisant jQuery, bien sûr.

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

Une solution de contournement que j'ai utilisée pour une application Web iOS était que j'ai créé tous les boutons de soumission de formulaires (qui étaient des boutons par CSS). J'ai donc ouvert un formulaire qui a posté sur le lien de destination, puis input type = "submit" Ce n'est pas la meilleure façon, mais c'est ce que j'ai compris avant de trouver cette page.

J'ai créé un package installable bower à partir de la réponse de @ rmarscher qui peut être trouvée ici:

http://github.com/stylr/iosweblinks

Vous pouvez facilement installer l'extrait avec bower en utilisant bower install --save iosweblinks

Pour ceux qui utilisent JQuery Mobile, les solutions ci-dessus cassent la boîte de dialogue contextuelle. Cela conservera les liens dans l'application Web et autorisera les fenêtres contextuelles.

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

Pourrait également le faire en:

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

Voici ce que j'utiliserais pour tous les liens sur une page ...

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

Si vous utilisez jQuery ou Zepto ...

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

Vous pouvez simplement supprimer cette balise meta.

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