Les liens ne s'ouvrent pas dans un browser externe dans JQuery Mobile avec PhoneGap

J'ai un problème avec PhoneGap 2.3.0 avec JQuery Mobile 1.2.0.

Tout lien externe iniOS s'ouvre dans l'application au lieu d'ouvrir Safari dans l'application, ce qui empêche l'user de revenir à l'application sans la redémarrer.

J'ai essayé à la fois rel = "external" et target = "_ blank" pour indiquer qu'il s'agit d'un lien externe, mais aucun avec succès.

J'ai vu que la façon par défaut que PhoneGap avec JQMobile devrait agir est la façon dont je veux. J'ai trouvé beaucoup de requests pour ce genre de comportement, mais pas le path.

J'ai ajouté rel="external" à mes liens d'ancre.

Et puis ajouté / substitué la méthode shouldStartLoadWithRequest dans la class shouldStartLoadWithRequest :

 - (BOOL) webView:(UIWebView*)theWebView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType { NSURL *url = [request URL]; // Intercept the external http requests and forward to Safari.app // Otherwise forward to the PhoneGap WebView if ([[url scheme] isEqualToSsortingng:@"http"] || [[url scheme] isEqualToSsortingng:@"https"]){ [[UIApplication sharedApplication] openURL:url]; return NO; } else { return [super webView:theWebView shouldStartLoadWithRequest:request navigationType:navigationType]; } } 

Cela fonctionne pour moi dans jQuery Mobile 1.2 et Phonegap 2.2.0. Cela devrait fonctionner de la même manière dans Phonegap 2.3.0 – mais je n'ai pas testé cela.

============================================= ==========================

MISE À JOUR :

Il ne sera peut-être pas nécessaire de le faire dans Phonegap 2.7.0 ou supérieur. Phonegap peut maintenant ouvrir des liens dans le composant UIWebView, Safari ou le composant InAppBrowser. Personnellement, j'aime le composant InAppBrowser, car il semble que ce soit une meilleure expérience user pour beaucoup de cas d'utilisation. Si vous voulez ouvrir des liens dans Safari, vous pouvez le faire maintenant en utilisant Javascript:

 window.open('http://whitelistd-url.com', '_system'); 

ou ceci pour InAppBrowser:

 window.open('http://whitelistd-url.com', '_blank'); 

Jetez un oeil ici pour plus d'informations:

http://wiki.apache.org/cordova/InAppBrowser http://docs.phonegap.com/fr/2.7.0/cordova_inappbrowser_inappbrowser.md.html#InAppBrowser

Si vous ne voulez pas replace les classs ou creuser trop profondément dans le code comme suggéré, essayez ceci. Cela a fonctionné comme un charme pour moi. J'utilise Phonegap Build et jQuery Mobile.

* Note – J'ai essayé plusieurs autres façons d'append des attributes directement aux balises d'ancrage, par exemple <a href="http://externalsite.com target="_blank" data-rel="external" data-ajax="false"> aussi essayé target="_system – mais aucun n'a fonctionné, donc j'ai dû utiliser javascript (seulement 5 lignes cependant).

Ce n'est pas trop compliqué mais je vais vous y guider …

  1. Vous devez empêcher le comportement par défaut de la balise d'ancrage. Alors en quelque sorte saisissez les labels que vous aimez. J'ai ajouté une class appelée "externe" à toutes les balises d'ancrage que je voulais ouvrir en externe. Trucs assez standard:

     $(document).on('click', ".external", function (e) { e.preventDefault(); }; 
  2. Puis récupérez la valeur href de l'ancre que vous essayez de charger en safari. Encore une fois, rien de trop fantaisiste ajouté ici:

     $(document).on('click', ".external", function (e) { e.preventDefault(); var targetURL = $(this).attr("href"); }; 
  3. Ce fut le morceau qui a pris un peu de creuser – je suppose que Phonegap a changé sa méthode sur ce avec 2,3? Quoi qu'il en soit, ouvrez le href saisi dans une nouvelle window (voici où "_system" entre):

     $(document).on('click', ".external", function (e) { e.preventDefault(); var targetURL = $(this).attr("href"); window.open(targetURL, "_system"); }); 

C'est tout. Ce dernier morceau de code est tout. Au less, c'est ce qui a fonctionné pour moi.

Bonne chance!

(Pour donner du crédit quand le crédit est dû, voici ce qui m'a le plus aidé: http://www.midnightryder.com/lancement-external-urls-in-phonegap-again-phonegap-2-4-x/ )

La même solution que @KyleSimmons, mais juste en ligne, et plus courte. mais une solution simple. Et fonctionne bien pour moi.

 <a href="http://www.google.com/" onclick="window.open(this.href,'_system'); return false;">Google</a> 

Pour ouvrir un lien externe dans jQuery Mobile:

 <a href="http://moorberry.net" data-rel="external">Like this</a>