PhoneGap: Öffne externen Link im Standardbrowser (außerhalb der App)

Ich versuche, die links öffnen in Safari (auf dem iPhone), von einer PhoneGap-Anwendung. Ich bin mit PhoneGap version 3.1.0, und verwenden Sie PhoneGap Buildum die Anwendung zu erstellen.

Habe ich zwei links auf der Seite (siehe unten in www/index.html). Beide links öffnen in das PhoneGap-Anwendung. Ich kann sehen, dass PhoneGap geladen ist richtig, weil alert('Laufwerk bereit!'); wird ausgelöst.

Was muss ich ändern, zum öffnen des links im Standard-browser (außerhalb der app)?

Den www/config.xml - Datei sieht wie folgt aus:

<?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>

Den www/index.html - Datei sieht wie folgt aus:

<!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>

Hier ist die Struktur des Projektes:

├── 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

InformationsquelleAutor der Frage Martin | 2013-11-15

15

Dies ist, wie ich gelöst in Cordova/Phonegap 3.6.3

Installieren Sie die inappbroswer cordova plugin:
```
cordova plugin add org.apache.cordova.inappbrowser
```
Wollte ich mein phonegap-app so ähnlich wie möglich zu einem standard-web-Seite: ich wollte, durch target="_blank" auf einen link, es wird auf einer externen Seite.

Dies ist, wie ich es umgesetzt:
```
$("a[target='_blank']").click(function(e){
  e.preventDefault();
  window.open($(e.currentTarget).attr('href'), '_system', '');
});
```
also alles, was ich tun müssen, ist mit einem Verweis wie dem folgenden
```
<a href="http://www.example.com" target="_blank">Link</a>
```
InformationsquelleAutor der Antwort pastullo

Wie über dieses?

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

EDIT:

Dies kann betreffen:
So rufen Sie mehrere JavaScript-Funktionen, die im onclick-event?

Dachte ich, wie wäre es damit:

Hinzufügen 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');
});

dann:

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

InformationsquelleAutor der Antwort Red2678

9

Sollten Sie die Lücke:plugin-tag und die voll qualifizierte id in Ihrem config.xml plugins zu installieren:
```
<gap:plugin name="org.apache.cordova.inappbrowser" />
```
Dokumentiert hier.

InformationsquelleAutor der Antwort wildabeast
4

Ich bin mit dem cordova 6.0, hier ist meine Lösung:

1: Installieren Sie dieses cordova plugin.
```
cordova plugin add cordova-plugin-inappbrowser
```
2: hinzufügen des " open link in der html wie folgt aus.
```
<a href="#" onclick="window.open('https://www.google.com/', '_system', 'location=yes');" >Google</a>
```
3: dies ist die importaint Schritt durch das ich konfrontiert viel Problem:
download der cordova.js - Datei und fügen Sie ihn in den www Ordner.
Dann stellen Sie einen Verweis von dieser in die index.html Datei.
```
<script src="cordova.js"></script>
```
Diese Lösung funktioniert sowohl für die Umwelt, android und iPhone.

InformationsquelleAutor der Antwort Tabish

versuchen Sie es mit diesem Beispiel weiter unten.

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


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

fügen Sie diese Unten line-in config.xml wenn Sie mit PhoneGap in der Version 3.1 oder höher

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

InformationsquelleAutor der Antwort Piyush

3

Ich hatte das gleiche problem und die Lösung war gehören phonegap.js - Datei, um die <head> in allen Seiten, wo ich die Verwendung der InAppBrowser.

Dein code, es ist ok! Das einzige, was Sie müssen hinzufügen ist: <script src="phonegap.js"></script> in Ihrem <head> Abschnitt auf Ihrem index.html

Dies ist ein bisschen komisch, weil Phonegap in seinem plugin-Dokumentation sagt:

"Wenn ein plugin nutzt die js-module element der direkten cordova zu laden
das plugin javascripts, dann keine <script> Referenzen notwendig sein wird
laden Sie ein plugin. Dies ist der Fall für die Kern-cordova-plugins"

Und InAppBrowser ist ein Kern-cordova-plugin. Aber aus irgendeinem seltsamen Grund nicht funktionieren, bis Sie es der phonegap.js Datei (zumindest in der version 0.3.3).

HINWEIS: ich habe einen Fehler gefunden. Einige Leute sagt, dass man 3 Dateien: phonegap.jscordova.js und cordova_plugins.js. Aber wenn ich diese 3 Dateien meine app funktioniert in iOS 7, aber in iOS 6 zu ignorieren, die Nutzung des plugins (unter Verwendung von: Cordova-3.3.0 + Phonegap Build + InAppBrowser 0.3.3).

Sehen Sie mehr in meinem ALSO Frage.

Hoffe das kann dir helfen!

InformationsquelleAutor der Antwort Jabel Márquez

Für iOs, die in Ihrer MainViewController.m sind die folgenden

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

BEARBEITEN:
Für Android, in CordovaWebViewClient.java in shouldOverrideUrlLoading Folgendes tun:

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

InformationsquelleAutor der Antwort Frane Poljak

Diese funktionierte perfekt für mich auf iOS.

Wie bereits in dem link oben:

1 - Installieren Sie das plugin mit dem Befehl:

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

2 - Und in der HTML-Datei, verwenden Sie eine der folgenden, je nach Bedarf:

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

InformationsquelleAutor der Antwort Loukan ElKadi

0

Dies ist, wie ich habe mir zu arbeiten.
1. In config.xml (phonegap) hinzufügen <gap:plugin name="org.apache.cordova.inappbrowser" />
2. Meine hrefs Aussehen wie folgt: <a onclick='window.open("http://link.com","_system", "location=yes")' href='javascript:void(0)' >link</a>
3. Sehr wichtig, was mir fehlte von Anfang an, fügen Sie die cordova script in den header ein: <script src="cordova.js"></script> ich weiß nicht, warum, aber für mich ohne es nicht funktionieren.
Hoffentlich wird das helfen

InformationsquelleAutor der Antwort onlymushu
0

Könnte es sein, dass ein PATH-Umgebungsvariable ein problem, versuchen Sie diesen link, es kann helfen.

Apache Cordova-Dokumentation

Phonegap/Cordova – Wie Sie Links zu externen Seiten

InformationsquelleAutor der Antwort Anita Demos
0

Bearbeiten config.xml Add source= "npm" auf der plugin-Eintrag.'<'Lücke:plugin name="org.apache.cordova.inappbrowser" source="npm" > '

InformationsquelleAutor der Antwort Sai

Ich angepasst pastullo Antwort arbeiten auch in einer WebApp, die möglicherweise geöffnet werden, in einer cordova InAppBrowser, aber auch als plain-Web-App (z.B. für 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', '');
}

InformationsquelleAutor der Antwort Pedi T.

-1

Für diejenigen, die nicht vor Ort es in der ursprünglichen Frage, die Sie müssen auch sicherstellen, dass die URL, die Sie versuchen zu öffnen ist nicht in der Whitelist, indem ein access-tag, um Ihre config.xml wie folgt:
```
<access origin="http://www.example.com" />
```
oder Sie können tun,
```
<access origin="*" />
```
zuzulassen, dass irgendetwas

InformationsquelleAutor der Antwort gamozzii
-2

In Fall, dass Sie versuchen zu öffnen, link im externen browser versuchen Sie es mit class="extern" für das Anker-tag.
```
<a class="external" href="www.google.com" >Link</a>
```
Hoffe, das hilft!

InformationsquelleAutor der Antwort Ashish C Naik

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.