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

j'essaie d'ouvrir des liens en Safari (sur un iPhone) à partir d'une application PhoneGap. J'utilise la version 3.1.0 de PhoneGap, et j'utilise "PhoneGap Build , pour construire l'application.

j'ai deux liens sur la page (montré ci-dessous dans www/index.HTML.) Les deux liens s'ouvrent à L'intérieur de L'application PhoneGap. Je peux voir que PhoneGap est chargé correctement, parce que alerte ('device ready!'); est déclenché.

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

Le www/config.le fichier 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="hello@example.com">
    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 www/index.le fichier 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
24
demandé sur user2845946 2013-11-16 02:30:53

14 réponses

C'est comme ça que j'ai résolu dans Cordova / Phonegap 3.6.3

installer le plugin inappbroswer cordova: 

cordova plugin add org.apache.cordova.inappbrowser

je voulais garder mon application phonegap aussi similaire que possible à une page Web standard: je voulais qu'en ayant target=" _blank " sur un lien, elle s'ouvre sur une page externe.

Voici comment je l'ai mis en œuvre: 

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

donc, tout ce que j'ai à faire est d'utiliser un lien comme le suivant 

<a href="http://www.example.com" target="_blank">Link</a>
15
répondu pastullo 2014-10-03 08:53:16

et ça? 

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

EDIT:

peut s'appliquer: comment faire pour appeler multiples fonctions JavaScript dans onclick event?

je me disais, que dis-tu de ça:

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
répondu Red2678 2017-05-23 12:17:54

vous devez utiliser la balise gap:plugin et l'id complet dans votre configuration.xml pour installer les plugins: 

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

comme documenté ici .

9
répondu wildabeast 2013-11-19 00:31:35

j'utilise la cordova 6.0, voici ma solution:

1: Installez ce plugin cordova. 

cordova plugin add cordova-plugin-inappbrowser

2: ajouter 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 en raison de cela j'ai fait face à beaucoup de problèmes: téléchargez le fichier cordova.js et collez-le dans le dossier www . Ensuite, faites une référence dans le fichier index.html . 

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

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

4
répondu Tabish 2016-09-01 05:37:06

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>

ajouter ceci en dessous de la ligne dans la configuration.xml si vous utilisez PhoneGap version 3.1 ou plus 

<gap:plugin name="org.apache.cordova.inappbrowser" />
3
répondu Piyush 2014-02-28 06:32:57

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

tout votre code c'est bon! La seule chose que vous devez ajouter est: <script src="phonegap.js"></script> dans votre <head> section sur votre index.html

c'est un peu bizarre parce que Phonegap dans sa section de documentation du plugin dit:

"si un plugin utilise l'élément js-module pour diriger cordova de charger le plugin javascripts, alors pas de références <script> sera nécessaire pour charger un plugin. C'est le cas pour les plugins core cordova "

et InAppBrowser est un plugin core cordova. Mais pour une raison étrange ne fonctionne pas jusqu'à ce que vous l'incluez le fichier phonegap.js (au moins dans la version 0.3.3).

NOTE : j'ai trouvé un bug. Certaines personnes disent que vous devez inclure 3 fichiers: phonegap.js , cordova.js et cordova_plugins.js . Mais quand j'inclus ces 3 fichiers, mon application fonctionne très bien dans iOS 7, mais dans iOS 6 ignorer l'utilisation du plugin (en utilisant: Cordova 3.3.0 + Phonegap Build + InAppBrowser 0.3.3).

Vous pouvez voir plus dans mon DONC, la question .

j'Espère que cela peut vous aider!

3
répondu Jabel Márquez 2017-05-23 11:46:53

pour iOs, dans votre MainViewController.m faire ce qui 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, à CordovaWebViewClient.java, in shouldoverrideurloading do the following: 

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
répondu Frane Poljak 2015-07-01 12:14:41

ce 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, utiliser l'un des 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
répondu Loukan ElKadi 2016-08-22 09:55:46

C'est comme ça que j'ai fait travailler le mien.

  1. Dans la configuration.xml (phonegap) ajouter <gap:plugin name="org.apache.cordova.inappbrowser" />
  2. mes href se présentent comme suit: <a onclick='window.open("http://link.com","_system", "location=yes")' href='javascript:void(0)' >link</a>
  3. très important, ce que je manquais dès le début, ajouter le script cordova dans votre en-tête: <script src="cordova.js"></script> Je ne sais pas pourquoi, mais pour moi sans lui, il ne fonctionne pas.

j'espère que ça va aider à

0
répondu onlymushu 2014-06-11 13:05:58

peut-être qu'il a un problème de variable D'environnement PATH, essayez ce lien il peut être utile.

Documentation Apache Cordova

Phonegap/Cordova – comment créer un lien vers les pages externes

0
répondu Anita Demos 2015-06-17 05:13:07

modifier la configuration.xml Ajouter source= "mnp" au plugin.'<'écart:plugin name="org.Apache.cordoue.inappbrowser" source="mnp" > '

0
répondu Sai 2015-10-11 11:00:32

j'ai adapté réponse de pastullo pour travailler aussi dans une WebApp qui pourrait être ouverte dans un InAppBrowser cordova, mais aussi als 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
répondu Pedi T. 2017-10-07 10:53:36

pour ceux qui ne l'ont pas repéré dans la question originale, vous devez également vous assurer que l'URL que vous essayez d'ouvrir n'est pas liste blanche en ajoutant une balise d'accès à votre configuration .xml comme suit: 

<access origin="http://www.example.com" />
"151920920 ou vous pouvez le faire 

<access origin="*" />

pour permettre à quoi que ce soit

-1
répondu gamozzii 2014-10-16 04:07:36

dans le cas où vous essayez d'ouvrir le lien dans le navigateur Web externe essayer en utilisant class=" externe " pour L'étiquette D'ancrage. 

<a class="external" href="www.google.com" >Link</a>

Espérons que cette aide!

-2
répondu Ashish C Naik 2017-06-28 18:24:31