phonegap ouvrir le lien dans le navigateur


114
<a target="_blank" data-rel="external" href="http://www.kidzout.com">www.kidzout.com</a>

hé experts, j'utilise phonegap 2.9.0 et j'utilise le code ci-dessus pour ouvrir le lien dans le navigateur mais il l'ouvre dans la même application ...... comment l'ouvrir dans le navigateur safari?

il ouvre le site Web dans la même application, puis je ne peux pas revenir à l'application, je dois donc supprimer l'application et la réinstaller .....


Si vous souhaitez ouvrir _blankun navigateur externe et _selfWebView, consultez ma solution 2015 pour Cordova 5.1.1: stackoverflow.com/a/32227524/82609
Sebastien Lorber

Voir aussi les réponses à une question similaire: stackoverflow.com/a/26176013/1480587 et stackoverflow.com/a/46619378/1480587
Peter T.

Réponses:


225

Comme suggéré dans une question similaire , utilisez JavaScript pour appeler window.openavec l' targetargument défini sur _system, conformément à la documentation InAppBrowser :

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

Cela devrait fonctionner, bien qu'une solution meilleure et plus flexible consisterait à intercepter tous les clickévénements des liens et à appeler window.openavec des arguments lus à partir des attributs du lien.

N'oubliez pas que vous devez installer le plugin InAppBrowser pour que cela fonctionne:

cordova plugin add cordova-plugin-inappbrowser

3
oui, j'ai aussi utilisé la même cible = "_ blank" dans le cordova 1.7.0 mais maintenant je travaille avec 2.9.0 et cela m'ennuie, votre sujjestion aussi n'a pas fonctionné ...... :(
ahsan ali

6
oui j'ai essayé ça aussi et j'ai suivi les liens que vous avez partagés, merci pour votre aide mais le problème est toujours là, le site s'ouvre toujours dans l'application ...... :(
ahsan ali

hey ahsan, cela vous dérangerait-il de préciser quel était votre problème? Je pense que j'ai peut-être le même problème.
whossname

3
N'oubliez pas que vous devez installer le plugin InAppBrowser pour que cela fonctionne, instructions ici: cordova.apache.org/docs/en/3.0.0
...

7
J'ai le même problème .. la solution ne fonctionne pas: (il s'ouvre juste comme un lien régulier (sur android)
Daniel

30

Comme répondu dans d'autres articles, vous avez deux options différentes pour différentes plates-formes. Ce que je fais c'est:

document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {

    // Mock device.platform property if not available
    if (!window.device) {
        window.device = { platform: 'Browser' };
    }

    handleExternalURLs();
}

function handleExternalURLs() {
    // Handle click events for all external URLs
    if (device.platform.toUpperCase() === 'ANDROID') {
        $(document).on('click', 'a[href^="http"]', function (e) {
            var url = $(this).attr('href');
            navigator.app.loadUrl(url, { openExternal: true });
            e.preventDefault();
        });
    }
    else if (device.platform.toUpperCase() === 'IOS') {
        $(document).on('click', 'a[href^="http"]', function (e) {
            var url = $(this).attr('href');
            window.open(url, '_system');
            e.preventDefault();
        });
    }
    else {
        // Leave standard behaviour
    }
}

Donc, comme vous pouvez le voir, je vérifie la plate-forme de l'appareil et, en fonction de cela, j'utilise une méthode différente. Dans le cas d'un navigateur standard, je laisse le comportement standard. À partir de maintenant, la solution fonctionnera correctement sur Android, iOS et dans un navigateur, tandis que la page HTML ne sera pas modifiée, de sorte qu'elle puisse avoir des URL représentées comme une ancre standard

<a href="http://stackoverflow.com">

La solution nécessite des plugins InAppBrowser et Device


Excellente réponse. Juste au cas où ce ne serait pas le cas pour les autres, assurez-vous que votre www / cordova_plugins.js contient à la fois les configurations de périphérique et d'inappbrowser. Lorsque j'installe des plugins, il ajoute les configurations js & plugins au dossier intermédiaire et non à mon dossier de travail principal www. Une fois que j'ai trié la configuration et les emplacements, cela a parfaitement fonctionné.
Michael Bordash

1
C'est la meilleure réponse! N'oubliez pas que vous n'avez pas installé le plugin InAppBrowser via:$ meteor add cordova:org.apache.cordova.inappbrowser@0.5.4
tixastronauta

Si quelqu'un souhaite contribuer à l'extrait de code, je l'ai téléchargé dans l'essentiel. gist.github.com/redolent/e79722b32a48a536b5ba
redolent

28
<a onclick="navigator.app.loadUrl('https://google.com/', { openExternal:true });">Link</a>

Fonctionne pour moi avec Android et PG 3.0


Semble toujours échouer pour moi sur les deux, Android 2.3.7 et 4.2.2.
user569825

2
Fonctionne pour moi sur Android 4.4.2 avec Cordova 3.3.0. Mais ne fonctionne pas sur iOS 6.1.
mytharcher

Fonctionne pour moi cordova 3.3.0, merci, et où avez-vous obtenu ces informations? Impossible de trouver dans la documentation.
Teoman shipahi

Cela a fonctionné pour moi avec cordova 3.4.1 et Android 4.2. Je n'avais pas besoin de plugin. Je ferai un rapport après avoir testé sur iOS7.
pgsandstrom

C'est la seule solution qui a fonctionné pour moi sur Android, merci
Niraj Chauhan

21

Il existe 2 façons différentes d'ouvrir l'URL sous Android et iPhone.

POUR IOS, utilisez le code suivant.

window.open("http://google.com", '_system');

et pour Android OS, utilisez le code suivant.

navigator.app.loadUrl("http://google.com", {openExternal : true});

Cordova peut window.open("http://google.com", '_system')tout aussi bien utiliser . Vous ne devriez pas utiliser navigator.app.loadUrl, car cela ne fonctionnera pas avec les market://URL: dans ce cas, il fermera simplement votre application et s'ouvrira dans la même fenêtre .. pas toujours préférable.
Agamemnus

1
Agamemnus, window.open ne fonctionne pas sur Android dans mon application phonegap 3.6. J'ai besoin d'utiliser la solution dans cette réponse, pour la faire fonctionner.
Moulde

10

Enfin, cet article m'aide sur iOS: http://www.excellentwebworld.com/phonegap-open-a-link-in-safari-or-external-browser/ .

Ouvrez le fichier "CDVwebviewDelegate.m" et recherchez "shouldStartLoadWithRequest", puis ajoutez ce code au début de la fonction:

if([[NSString stringWithFormat:@"%@",request.URL] rangeOfString:@"file"].location== NSNotFound) {
    [[UIApplication sharedApplication] openURL:[request URL]];
    return NO;
}

En utilisant navigator.app.loadUrl("http://google.com", {openExternal : true}); pour Android est OK.

Via Cordova 3.3.0.


C'est la seule chose qui a fonctionné pour moi dans la version 3.0.0. Je vous remercie!!
Rocklan

Dans la version 3.0, vous devez inclure le plugin InAppBrowser. Aussi étrange que cela puisse paraître.
Sean Bannister

Je le changerais une couche ci-dessus dans MainViewController.m: - (BOOL) webView: (UIWebView *) theWebView shouldStartLoadWithRequest: (NSURLRequest *) request navigationType: (UIWebViewNavigationType) navigationType {NSURL * url = [URL de demande]; if ([[schéma d'url] isEqualToString: @ "file"] || [[schéma d'url] isEqualToString: @ "gap"]) {return [super webView: theWebView shouldStartLoadWithRequest: request navigationType: navigationType]; } else {[[UIApplication sharedApplication] openURL: url]; retourner NON; }}
Gamadril

10

Aucune de ces réponses n'est suffisamment explicite pour que des liens externes s'ouvrent sur chaque plateforme. Selon la documentation inAppBrowser :

Installer

cordova plugin add cordova-plugin-inappbrowser

Écraser window.open (facultatif, mais recommandé pour plus de simplicité)

window.open = cordova.InAppBrowser.open;

Si vous n'écrasez pas window.open, vous utiliserez la window.openfonction native et ne pouvez pas vous attendre à obtenir les mêmes résultats multiplateformes.

Utilisez-le pour ouvrir des liens dans le navigateur par défaut

window.open(your_href_value, '_system');

Notez que la cible de inAppBrowser (qui est ce que le nom du plugin suggère qu'il doit être utilisé) est '_blank', au lieu de '_system'.


Sans les étapes ci-dessus, je n'ai pas pu obtenir de liens à ouvrir dans l'application de navigateur par défaut multiplateforme.

Crédit supplémentaire

Voici un exemple de gestionnaire de clics (en direct) pour les liens:

document.addEventListener('click', function (e) {
    if (e.target.tagName === 'A' &&
        e.target.href.match(/^https?:\/\//)) {
        e.preventDefault();
        window.open(e.target.href, '_system');
    }
});

Où remplacez-vous exactement window.open? Sur le site Web ou l'application
cordova

De préférence le haut de votre fichier JavaScript que vous chargez dans votre page index.html (votre site Web, si cela vous aide)
bozdoz

7

Si vous avez jQuery dans les parages, vous pouvez intercepter le clic sur le lien comme ceci:

$(document).on('click', 'a', function (event) {
    event.preventDefault();
    window.open($(this).attr('href'), '_system');
    return false;
});

De cette façon, vous n'avez pas à modifier les liens dans le html, ce qui peut vous faire gagner beaucoup de temps. J'ai configuré cela en utilisant un délégué, c'est pourquoi vous voyez qu'il est lié à l'objet document, avec la balise «a» comme deuxième argument. De cette façon, toutes les balises «a» seront gérées, quel que soit le moment où elles sont ajoutées.

Bien sûr, vous devez toujours installer le plug-in InAppBrowser:

cordova plugin add org.apache.cordova.inappbrowser

c'est une bonne idée que je vais utiliser mais vous devriez également vous occuper des appels directs window.open (tout ne passe pas par un lien)
Sebastien Lorber

3
window.open('http://www.kidzout.com', '_system');

Fonctionnera mais uniquement si le plugin inappbrowser est installé. Pour installer, à l'aide du terminal, accédez au dossier www dans votre projet et tapez:

phonegap plugin add org.apache.cordova.inappbrowser

ou

cordova plugin add org.apache.cordova.inappbrowser

Ensuite, votre lien s'ouvrira dans le navigateur.


La commande phonegap local <command>a été obsolète. La commande a été déléguée à phonegap <command>. La commande phonegap local <command>sera bientôt supprimée.
Ajay Suwalka

Je ne sais pas dans le passé, mais de nos jours, l'installation de ce plugin est correcte cordova plugin add cordova-plugin-inappbrowser.
Plinio FM

2

Avec Cordova 5.0 et supérieur, le plugin InAppBrowser est renommé dans le registre du plugin Cordova, vous devez donc l'installer en utilisant

cordova plugin add cordova-plugin-inappbrowser --save

Ensuite, utilisez

<a href="#" onclick="window.open('http://www.kidzout.com', '_system');">www.kidzout.com</a>


1

J'utilise PhoneGap Build (v3.4.0), en me concentrant sur iOS, et j'avais besoin d'avoir cette entrée dans mon config.xml pour que PhoneGap reconnaisse le plug-in InAppBrowser.

<gap:plugin name="org.apache.cordova.inappbrowser" />

Après cela, l'utilisation de window.open (url, cible) devrait fonctionner comme prévu, comme indiqué ici .


1
J'utilise m also using PhoneGap Build (v3.5.x) and added the plugin via the config.xml. But what i get is an InAppBrowser without controls an cannot call the safari browser. Ijuste window.open (). Aucun conseil?
Reinos

S'il est correctement configuré, window.open devrait simplement fonctionner. Dans ma situation, window.open ouvre une autre URL de navigateur, et cela fonctionne bien. Assurez-vous que l'URL est correcte.
contactmatt

Je viens de l'essayer avec Phonegap Build et il y a une erreur avec: "plugin non pris en charge: org.apache.cordova.inappbrowser"
David Ball

1

J'ai également rencontré le problème que le lien ne s'ouvrait pas sur le navigateur, voici mon correctif avec les étapes:

1: Installez ce plugin cordova.

cordova plugin add cordova-plugin-inappbrowser

2: ajoutez le lien ouvert dans le html comme suit.

<a href="#" onclick="window.open('https://www.google.com/', '_system', 'location=yes');" >Google</a>

3: c'est l'étape la plus importante à cause de cela, j'ai rencontré de nombreux problèmes: téléchargez le cordova.jsfichier et collez-le dans le wwwdossier. Faites-en ensuite référence dans le index.htmlfichier.

<script src="cordova.js"></script>

Cette solution fonctionnera à la fois pour l'environnement Android et iPhone.


-2

Comme ça :

<a href="#" onclick="window.open('https://www.nbatou.com', '_system'); return false;">https://www.nbatou.com</a>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.