web-dev-qa-db-fra.com

phonegap ouvrir le lien dans le navigateur

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

hey 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 navigateur Safari?

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

html5cordova
113
ahsan ali

Comme suggéré dans ne question similaire , utilisez JavaScript pour appeler window.open avec l'argument target défini sur _system, conformément à documentation InAppBrowser =:

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

Cela devrait fonctionner, mais une solution meilleure et plus flexible consisterait à intercepter tous les événements click de tous les liens et à appeler window.open avec des arguments lus à partir des attributs du lien.

N'oubliez pas que vous devez installer le plug-in InAppBrowser pour que cela fonctionne: 

cordova plugin add cordova-plugin-inappbrowser
219
freejosh

Comme indiqué 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
    }
}

Comme vous pouvez le constater, je vérifie la plate-forme de l'appareil et, selon moi, j'utilise une méthode différente. Dans le cas d'un navigateur standard, je laisse le comportement standard. A partir de maintenant, la solution fonctionnera correctement sous Android, iOS et dans un navigateur, tandis que la page HTML ne sera pas modifiée, afin que les URL puissent être représentées en tant qu'ancre standard.

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

La solution nécessite les plug-ins InAppBrowser et Device

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

Fonctionne pour moi avec Android & PG 3.0

26
user2758937

Il existe 2 façons différentes d’ouvrir une URL dans Android et un iphone.

FOR IOS, utilisez le code suivant.

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

et pour Android, utilisez le code suivant.

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

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

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

Via Cordova 3.3.0.

10
mytharcher

Aucune de ces réponses n'est suffisamment explicite pour que des liens externes soient ouverts sur chaque plate-forme. Selon le inAppBrowser docs :

Installer 

cordova plugin add cordova-plugin-inappbrowser

Écrase window.open (facultatif, mais recommandé pour des raisons de simplicité) 

window.open = cordova.InAppBrowser.open;

Si vous n'écrasez pas window.open, vous utiliserez la fonction native window.open et vous ne pourrez pas obtenir les mêmes résultats sur plusieurs plates-formes.

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

window.open(your_href_value, '_system');

Notez que la cible de inAppBrowser (pour laquelle le nom du plug-in suggère qu'il doit être utilisé) est '_blank', au lieu de '_system'.

Sans les étapes ci-dessus, je ne pouvais pas obtenir de liens à ouvrir dans l'application de navigateur par défaut multiplate-forme.

Crédit supplémentaire

Voici un exemple de gestionnaire de clic (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');
    }
});
8
bozdoz

Si jQuery est présent, 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 code HTML, ce qui peut vous faire gagner beaucoup de temps. J'ai mis cela en place en utilisant un délégué, c'est pourquoi vous voyez qu'il est lié à l'objet document, avec la balise 'a' comme second argument. De cette façon, toutes les balises "a" seront traitées, quel que soit le moment où elles sont ajoutées.

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

cordova plugin add org.Apache.cordova.inappbrowser
7
Michel Reij
window.open('http://www.kidzout.com', '_system');

Cela fonctionnera, mais seulement si le plugin inappbrowser est installé. Pour installer, à l’aide de terminal, accédez au dossier www de 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.

3
Dev01

Avec Cordova 5.0 et versions supérieures, le plug-in InAppBrowser est renommé dans le registre des plug-ins Cordova. Vous devez donc l'installer à l'aide de

cordova plugin add cordova-plugin-inappbrowser --save

Puis utiliser

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

J'utilise PhoneGap Build (v3.4.0), avec un focus sur iOS, et j'avais besoin de cette entrée dans mon config.xml pour PhoneGap pour reconnaître le plug-in InAppBrowser.

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

Après cela, utiliser window.open (url, target) devrait fonctionner comme prévu, comme documenté ici .

1
contactmatt

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

1: Installez ce plugin cordova.

cordova plugin add cordova-plugin-inappbrowser

2: ajoutez le lien ouvert dans le code 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 fichier cordova.js et collez-le dans le dossier www. Faites ensuite référence à cela dans le fichier index.html.

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

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

1
Tabish

Comme ça :

<a href="#" onclick="window.open('https://www.nbatou.com', '_system'); return false;">https://www.nbatou.com</a>
0
OussamaChaib