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

J’ai un problème avec le Web après avoir ajouté l’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 toute fonctionnalité en 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 cadre iWebKit :

 var a=document.getElementsByTagName("a"); for(var i=0;i 

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

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

Voici le code final qu’ils ont proposé:

  

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 JS Bootstrap (c.-à-d. 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;      }    });    } }); 

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 seront également ouverts 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 en utilisant l’atsortingbut data-ajax = ‘false’. En fait, cela se produira chaque fois que ajaxEnabled est désactivé, qu’il s’agisse d’un lien externe ou d’un lien externe, par un paramètre $ .mobile.ajaxEnabled ou en ayant un atsortingbut 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 travaillait pas avec bind ())

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

Cela m’a pris beaucoup 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 réellement la nouvelle fenêtre.

C’est une vieille question et beaucoup de solutions utilisent javascript. Depuis lors, iOS 11.3 a été publié et vous pouvez maintenant utiliser le membre de scope . Le membre de scope est une URL comme "/" où tous les chemins sous cette scope n’ouvrent pas une nouvelle page.

Le membre de scope est une chaîne qui représente l’étendue 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 lire plus ici . Je recommande également d’utiliser le générateur qui fournira cette fonctionnalité.

Si vous spécifiez l’étendue, tout fonctionne comme prévu, comme pour Android, les destinations hors de l’étendue s’ouvriront dans Safari – avec un bouton retour (le petit dans la barre d’état) vers votre PWA.

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

Dans l’étiquette de tête:

  

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

  Link  

J’ai reçu ce code de ce commentaire: les balises meta de l’application web iphone

Peut-être devriez-vous autoriser l’ouverture de liens dans une nouvelle fenêtre lorsque la cible est explicitement définie sur “_blank” également:

 $('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’ai trouvé celui qui est très complet et efficace, car il vérifie que s’exécute uniquement 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 aussi faire des liens presque normalement:

 TEXT OF THE LINK 

Et vous pouvez supprimer le tag de hachage et href, tout ce qu’il 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):

  

Ceci est une version légèrement adaptée de Sean’s qui empêchait le bouton 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 avec 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 dans le mode application Web autonome, sauf ceux qui ont target = “_ blank”. Utiliser 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 liens (qui étaient des boutons par CSS). J’ai donc ouvert un formulaire qui a posté sur le lien de destination, puis entrée type = “submit” Pas le meilleur moyen, mais c’est ce que j’ai compris avant de trouver cette page.

J’ai créé un paquet d’installation installable à partir de la réponse de @ rmarscher que vous pouvez trouver 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 rompent la boîte de dialog contextuelle. Cela gardera des liens dans webapp et permettra des popups.

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

Pourrait aussi le faire par:

 $(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.