web-dev-qa-db-fra.com

PhoneGap: ouvre un lien externe dans le navigateur par défaut (en dehors de l'application)

J'essaie d'ouvrir des liens dans Safari (sur un iPhone) à partir d'une application PhoneGap. J'utilise PhoneGap version 3.1.0 et utilise PhoneGap Build , pour créer l'application.

J'ai deux liens sur la page (voir ci-dessous dans www/index.html). Les deux liens s'ouvrent dans l'application PhoneGap. Je peux voir que PhoneGap est chargé correctement, car alert ('device ready!'); est déclenché.

Que dois-je changer, pour ouvrir les liens dans le navigateur par défaut (en dehors de l'application)?

Le fichier www/config.xml ressemble à ceci:

<?xml version="1.0" encoding="UTF-8"?>

<widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="com.company.appname" version="0.0.3">
  <name>AppName</name>
  <description>description</description>
  <author href="http://www.example.com/" email="[email protected]">
    Company
  </author>
  <preference name="phonegap-version" value="3.1.0" />
  <preference name="orientation" value="portrait" />
  <preference name="stay-in-webview" value="false" />

  <gap:plugin name="org.Apache.cordova.inappbrowser" version="0.2.3" />
  <gap:plugin name="org.Apache.cordova.dialogs" version="0.2.2" />
  <gap:plugin name="com.phonegap.plugins.pushplugin" version="2.0.5" />

  <plugins>
    <plugin name="InAppBrowser" value="CDVInAppBrowser" />
  </plugins>

  <feature name="InAppBrowser">
    <param name="ios-package" value="CDVInAppBrowser" />
  </feature>
  <access Origin="*" />
</widget>

Le fichier www/index.html ressemble à ceci:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
  <title>Test application</title>
</head>
<body>
  <a href="#" onclick="openUrl('http://www.google.com/'); return false;">Link test 1</a>
  <a href="#" onclick="window.open('http://www.google.com/', '_system', 'location=yes'); return false;">Test link 2</a>

  <script src="phonegap.js"></script>
  <script src="cordova.js"></script>
  <script src="js/jquery-1.9.1.js"></script>
  <script type="text/javascript">
    function openUrl(url) {
      alert("open url: " + url);
      window.open(url, '_blank', 'location=yes');
    }

    function onDeviceReady() {
      alert('device ready!');
    }
    $(function() {
        document.addEventListener("deviceready", onDeviceReady, true);
    });
  </script>
</body>
</html>

Voici la structure du projet:

├── platforms
├── plugins
│   └── org.Apache.cordova.inappbrowser
│       ├── LICENSE
│       ├── package.json
│       ├── plugin.xml
│       ├── README.md
│       ├── RELEASENOTES.md
│       ├── src
│       │   ├── Android
│       │   │   ├── InAppBrowser.Java
│       │   │   └── InAppChromeClient.Java
│       │   ├── blackberry10
│       │   │   └── README.md
│       │   ├── ios
│       │   │   ├── CDVInAppBrowser.h
│       │   │   └── CDVInAppBrowser.m
│       │   └── wp
│       │       └── InAppBrowser.cs
│       └── www
│           ├── InAppBrowser.js
│           └── windows8
│               └── InAppBrowserProxy.js
├── README.md
└── www
    ├── config.xml
    ├── cordova.js
    ├── index.html
    ├── js
    │   └── jquery-1.9.1.js
    └── phonegap.js
cordovaphonegap-pluginsphonegap-buildinappbrowser
25
Martin

C’est ainsi que j’ai résolu la situation dans Cordova/Phonegap 3.6.3

Installez le plugin inappbroswer cordova:

cordova plugin add org.Apache.cordova.inappbrowser

Je voulais que mon application phonegap soit aussi semblable que possible à une page Web standard: je voulais qu'en ayant target = "_ blank" sur un lien, celle-ci s'ouvre dans une page externe.

Voici comment je l'ai implémenté:

$("a[target='_blank']").click(function(e){
  e.preventDefault();
  window.open($(e.currentTarget).attr('href'), '_system', '');
});

donc tout ce que je dois faire est d'utiliser un lien comme celui-ci

<a href="http://www.example.com" target="_blank">Link</a>
16
pastullo

Que dis-tu de ça?

<a href="#" onclick="window.open(encodeURI('http://www.google.com/'), '_system')">Test link 2</a>

MODIFIER:

Cela peut concerner: Comment appeler plusieurs fonctions JavaScript dans un événement onclick?

Je pensais, que diriez-vous de ceci:

Ajouter au code:

$(".navLink").on('tap', function (e) {
    //Prevents Default Behavior 
    e.preventDefault();
    // Calls Your Function with the URL from the custom data attribute 
    openUrl($(this).data('url'), '_system');
});

puis:

<a href="#" class="navLink" data-url="http://www.google.com/">Go to Google</a>
10
Red2678

Vous devez utiliser la balise gap: plugin et l'ID complet de votre config.xml pour installer les plugins

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

Comme documenté ici .

9
wildabeast

J'utilise cordova 6.0, voici ma solution:

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 été confronté à 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 iPhone.

5
Tabish

essayez avec cet exemple ci-dessous.

<a class="appopen" onClick="OpenLink();">Sign in</a>


<script>
function OpenLink(){
    window.open("http://www.google.com/", "_system");
}
</script>

ajoutez cette ligne au-dessous de config.xml si vous utilisez PhoneGap version 3.1 ou supérieure

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

J'ai eu le même problème que vous et la solution était include phonegap.js fichier au <head> dans toutes les pages où je vais utiliser InAppBrowser.

Tout ton code ça va! La seule chose que vous devez ajouter est: <script src="phonegap.js"></script> dans votre section <head> sur votre index.html

Ceci est un peu étrange car Phonegap dans sa section de documentation du plugin dit:

"Si un plugin utilise l'élément js-module pour charger cordova de charger Les javascripts du plugin, aucune référence <script> ne sera nécessaire Pour charger un plugin. C'est le cas des plugins centraux cordova"

Et InAppBrowser est un plugin de base pour Cordova. Mais pour une raison étrange, ne travaillez pas tant que vous n’avez pas inclus le fichier phonegap.js (au moins dans la version 0.3.3).

NOTE: J'ai trouvé un bogue. Certaines personnes disent que vous devez inclure 3 fichiers: phonegap.js, cordova.js et cordova_plugins.js. Mais lorsque j'inclus ces 3 fichiers, mon application fonctionne correctement dans iOS 7, mais dans iOS 6, ignore l'utilisation du plug-in (Utilisation de: Cordova 3.3.0 + Phonegap Build + InAppBrowser 0.3.3).

Vous pouvez en voir plus dans ma SO question .

J'espère que cela peut vous aider!

3
Jabel Márquez

Pour les iO, dans votre MainViewController.m, procédez comme suit:

- (BOOL) webView:(UIWebView*)theWebView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSURL *url = [request URL];
    if (![url isFileURL] && navigationType == UIWebViewNavigationTypeLinkClicked)
    {
        if ([[UIApplication sharedApplication] canOpenURL:url]) {
        [[UIApplication sharedApplication] openURL:url];
            return NO;
        }
    } 

    return [super webView:theWebView shouldStartLoadWithRequest:request navigationType:navigationType]; 
}

EDIT: Pour Android, dans CordovaWebViewClient.Java, dans shouldOverrideUrlLoading, procédez comme suit:

public boolean shouldOverrideUrlLoading(WebView view, String url) {
          if(/*check if not external link*) {
            view.loadUrl(url);
          } else {
            //prepend http:// or https:// if needed
            Intent i = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
            startActivity(i);
          }
          return true;
        }
1
Frane Poljak

Cela a parfaitement fonctionné pour moi sur iOS.

Comme mentionné dans le lien ci-dessus:

1- Installez le plugin en utilisant la commande: 

cordova plugin add https://git-wip-us.Apache.org/repos/asf/cordova-plugin-inappbrowser.git

2- Et dans le fichier HTML, utilisez l’un des éléments suivants au besoin:

window.open(‘http://example.com’, ‘_system’);   Loads in the system browser 
window.open(‘http://example.com’, ‘_blank’);    Loads in the InAppBrowser
window.open(‘http://example.com’, ‘_blank’, ‘location=no’); Loads in the InAppBrowser with no location bar
window.open(‘http://example.com’, ‘_self’); Loads in the Cordova web view
1
Loukan ElKadi

Réponse tardive, mais peut-être que ce sera utile pour quelqu'un. Donc, ce que j'ai dans mon code de travail dans les applications iOS et Android basées sur Cordova. Pour ouvrir un lien externe dans le navigateur par défaut (Safari ou Google):

1) Assurez-vous d'avoir le plugin inAppBrowser

cordova plugin add cordova-plugin-inappbrowser --save

2) Ajouter à device.js

function openURL(urlString){
  let url = encodeURI(urlString);
  window.open(url, '_system', 'location=yes');
}

3) Créer un nouveau lien

<a href="#" onClick="openURL('http://www.google.com')">Go to Google</a>
0
Alexander Novichenko

C'est comme ça que j'ai eu le mien au travail.

  1. Dans config.xml (phonegap), ajoutez <gap:plugin name="org.Apache.cordova.inappbrowser" />
  2. Mes hrefs sont comme suit: <a onclick='window.open("http://link.com","_system", "location=yes")' href='javascript:void(0)' >link</a>
  3. Très important, ce qui me manquait au début, ajoutez le script Cordova dans votre en-tête: <script src="cordova.js"></script> Je ne sais pas pourquoi, mais pour moi sans cela, cela ne fonctionne pas.

Espérons que cela aidera

0
onlymushu

edit config.xml Ajoutez source = "npm" à l'entrée du plugin. '<' gap: nom du plugin = "org.Apache.cordova.inappbrowser" source = "npm"> '

0
Sai

Peut-être que vous avez un problème de variable d'environnement PATH, essayez ce lien, il peut être une aide. 

Documentation Apache Cordova

Phonegap/Cordova - Comment créer un lien vers des pages externes

0
Anita Demos

J'ai adapté pastullo's answer pour qu'il fonctionne également dans une WebApp pouvant être ouverte dans un InAppBrowser cordova, mais également dans une simple Web-App (par exemple, pour les tests):

function initOpenURLExternally() {
    $("a[target='_blank'],a[target='_system']").each(function (i) {
        var $this = $(this);
        var href = $this.attr('href');
        if (href !== "#") {
            $this
                .attr("onclick", "openURLExternally(\"" + href + "\"); return false;")
                .attr("href", "#");
        }
    });
}

function openURLExternally(url) {
    // if cordova is bundeled with the app (remote injection plugin)
    log.trace("openURLExternally: ", url);
    if (typeof cordova === "object") {
        log.trace("cordova exists ... " + typeof cordova.InAppBrowser);
        if (typeof cordova.InAppBrowser === "object") {
            log.trace("InAppBrowser exists");
            cordova.InAppBrowser.open(url, "_system");
            return;
        }
    }

    // fallback if no cordova is around us:
    //window.open(url, '_system', '');
    window.open(url, '_blank', '');
}
0
Pedi T.