Phonegap Link im Browser öffnen

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

Hey Experten, ich benutze Phonegap 2.9.0 und ich benutze den obigen Code, um den Link im Browser zu öffnen, aber er öffnet ihn in derselben App. Wie öffne ich ihn im Safari-Browser?

Es öffnet die Website in der gleichen App und dann kann ich nicht mehr zur App zurückkehren. Daher muss ich die App löschen und erneut installieren.

Ahsan Ali
quelle
Wenn Sie _blankeinen externen Browser und _selfWebView öffnen möchten, überprüfen Sie meine 2015-Lösung für Cordova 5.1.1: stackoverflow.com/a/32227524/82609
Sebastien Lorber
Siehe auch die Antworten in einer ähnlichen Frage: stackoverflow.com/a/26176013/1480587 und stackoverflow.com/a/46619378/1480587
Peter T.

Antworten:

225

Verwenden Sie , wie in einer ähnlichen Frage vorgeschlagen , JavaScript, um window.openmit dem targetArgument aufzurufen _system, das gemäß der InAppBrowser-Dokumentation festgelegt ist :

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

Dies sollte funktionieren, obwohl eine bessere und flexiblere Lösung darin besteht, die clickEreignisse aller Links abzufangen und window.openmit Argumenten aufzurufen , die aus den Attributen des Links gelesen werden.

Denken Sie daran, dass Sie das InAppBrowser-Plugin installieren müssen, damit dies funktioniert:

cordova plugin add cordova-plugin-inappbrowser
freejosh
quelle
3
ja, ich habe auch das gleiche target = "_ blank" in der cordova 1.7.0 verwendet, aber jetzt arbeite ich mit 2.9.0 und es nervt mich, deine sujjestion hat auch nicht funktioniert ...... :(
ahsan ali
6
Ja, ich habe das auch versucht und bin auch den Links gefolgt, die du geteilt hast. Danke für deine Hilfe, aber das Problem ist immer noch da. Die Seite wird immer noch in der App
geöffnet.
Hey Ahsan, würde es Ihnen etwas ausmachen, näher auf Ihr Problem einzugehen? Ich glaube, ich habe vielleicht das gleiche Problem.
Whossname
3
Denken Sie daran, dass Sie das InAppBrowser-Plugin installieren müssen, damit dies funktioniert. Anweisungen hier: cordova.apache.org/docs/en/3.0.0/…
jackocnr
7
Ich habe das gleiche Problem .. die Lösung funktioniert nicht :( es öffnet sich nur als regulärer Link (auf Android)
Daniel
29

Wie in anderen Beiträgen beantwortet, haben Sie zwei verschiedene Optionen für verschiedene Plattformen. Was ich tue ist:

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

Wie Sie sehen, überprüfe ich die Geräteplattform und verwende abhängig davon eine andere Methode. Bei einem Standardbrowser lasse ich das Standardverhalten. Von nun an funktioniert die Lösung unter Android, iOS und in einem Browser einwandfrei, während die HTML-Seite nicht geändert wird, sodass URLs als Standardanker dargestellt werden können

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

Die Lösung erfordert InAppBrowser- und Geräte-Plugins

krzychu
quelle
Hervorragende Antwort. Nur für den Fall, dass dies für andere nicht der Fall ist, stellen Sie sicher, dass in Ihrer Datei www / cordova_plugins.js sowohl das Gerät als auch die inappbrowser-Konfiguration enthalten sind. Wenn ich Plugins installiere, werden die Konfigurationen js & plugins zum Staging-Ordner und nicht zu meinem primären WWW-Ordner hinzugefügt. Nachdem ich die Konfiguration und die Speicherorte aussortiert hatte, funktionierte dies perfekt.
Michael Bordash
1
Das ist die beste Antwort! Bitte denken Sie daran, dass Sie das InAppBrowser-Plugin nicht installiert haben über:$ meteor add cordova:[email protected]
tixastronauta
Wenn jemand zum Snippet beitragen möchte, habe ich es auf den Punkt gebracht. gist.github.com/redolent/e79722b32a48a536b5ba
redolent
28
<a onclick="navigator.app.loadUrl('https://google.com/', { openExternal:true });">Link</a>

Funktioniert für mich mit Android & PG 3.0

user2758937
quelle
Scheint für mich auf Android 2.3.7 und 4.2.2 immer noch zu scheitern.
user569825
2
Funktioniert für mich unter Android 4.4.2 mit Cordova 3.3.0. Funktioniert aber nicht unter iOS 6.1.
Mytharcher
Funktioniert für mich Cordova 3.3.0, danke, und woher haben Sie diese Informationen? Konnte nicht in der Dokumentation finden.
Teoman Shipahi
Dies funktionierte bei mir mit Cordova 3.4.1 und Android 4.2. Ich brauchte kein Plugin. Ich werde nach dem Testen auf iOS7 zurückmelden.
Pgsandstrom
Dies ist die einzige Lösung, die für mich auf Android funktioniert hat, danke
Niraj Chauhan
21

Es gibt zwei verschiedene Möglichkeiten, URL in Android und iPhone zu öffnen.

Verwenden Sie für IOS den folgenden Code.

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

und für Android OS folgenden Code verwenden.

navigator.app.loadUrl("http://google.com", {openExternal : true});
Hassan Siddique
quelle
Cordova kann window.open("http://google.com", '_system')genauso gut verwenden. Sie sollten es nicht verwenden navigator.app.loadUrl, da es mit market://URLs nicht funktioniert. In diesem Fall wird Ihre App einfach geschlossen und im selben Fenster geöffnet. Dies ist nicht immer vorzuziehen.
Agamemnus
1
Agamemnus, window.open funktioniert nicht auf Android in meiner Phonegap 3.6-Anwendung. Ich muss die Lösung in dieser Antwort verwenden, damit sie funktioniert.
Moulde
10

Endlich hilft mir dieser Beitrag unter iOS: http://www.excellentwebworld.com/phonegap-open-a-link-in-safari-or-external-browser/ .

Öffnen Sie die Datei "CDVwebviewDelegate.m" und suchen Sie nach "shouldStartLoadWithRequest". Fügen Sie dann diesen Code am Anfang der Funktion hinzu:

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

Während der Verwendung navigator.app.loadUrl("http://google.com", {openExternal : true});für Android ist OK.

Via Cordova 3.3.0.

Mytharcher
quelle
Dies ist das einzige, was in 3.0.0 für mich funktioniert hat. Danke dir!!
Rocklan
In 3.0 müssen Sie das InAppBrowser-Plugin einbinden. Wie seltsam das auch sein mag.
Sean Bannister
Ich würde es eine Ebene höher in MainViewController.m ändern: - (BOOL) webView: (UIWebView *) theWebView shouldStartLoadWithRequest: (NSURLRequest *) Anforderungsnavigationstyp: (UIWebViewNavigationType) navigationType {NSURL * url = [Anforderungs-URL]; if ([[url Schema] isEqualToString: @ "Datei"] || [[url Schema] isEqualToString: @ "Lücke"]) {return [Super-WebView: theWebView shouldStartLoadWithRequest: Anforderungsnavigationstyp: Navigationstyp]; } else {[[UIApplication sharedApplication] openURL: url]; return NO; }}
Gamadril
10

Keine dieser Antworten ist explizit genug, um externe Links auf jeder Plattform zu öffnen. Gemäß den inAppBrowser-Dokumenten :

Installieren

cordova plugin add cordova-plugin-inappbrowser

Fenster.open überschreiben (optional, aber der Einfachheit halber empfohlen)

window.open = cordova.InAppBrowser.open;

Wenn Sie nicht überschreiben window.open, verwenden Sie die native window.openFunktion und können nicht erwarten, dass plattformübergreifend dieselben Ergebnisse erzielt werden.

Verwenden Sie diese Option, um Links im Standardbrowser zu öffnen

window.open(your_href_value, '_system');

Beachten Sie, dass das Ziel für den inAppBrowser (für den der Name des Plugins die Verwendung vorschlägt) '_blank'anstelle von lautet '_system'.


Ohne die obigen Schritte konnte ich keine plattformübergreifenden Links zum Öffnen in der Standard-Browser-App erhalten.

Extra Gutschrift

Hier ist ein Beispiel (Live) Klick-Handler für die Links:

document.addEventListener('click', function (e) {
    if (e.target.tagName === 'A' &&
        e.target.href.match(/^https?:\/\//)) {
        e.preventDefault();
        window.open(e.target.href, '_system');
    }
});
bozdoz
quelle
Wo genau überschreiben Sie das window.open? In der Website oder der Cordova App
Ellisan
Am besten den Anfang Ihrer JavaScript-Datei, die Sie in Ihre index.html-Seite laden (Ihre Website, wenn das hilft)
bozdoz
7

Wenn Sie zufällig jQuery haben, können Sie den Klick auf den Link wie folgt abfangen:

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

Auf diese Weise müssen Sie die Links im HTML nicht ändern, was viel Zeit sparen kann. Ich habe dies mit einem Delegaten eingerichtet. Deshalb wird es an das Dokumentobjekt gebunden, wobei das Tag 'a' das zweite Argument ist. Auf diese Weise werden alle 'a'-Tags behandelt, unabhängig davon, wann sie hinzugefügt werden.

Natürlich müssen Sie das InAppBrowser-Plug-In noch installieren:

cordova plugin add org.apache.cordova.inappbrowser
Michel Reij
quelle
Dies ist eine schöne Idee, die ich verwenden werde, aber Sie sollten sich auch um direkte window.open-Anrufe kümmern (nicht alles geht über einen Link)
Sebastien Lorber
3
window.open('http://www.kidzout.com', '_system');

Funktioniert aber nur, wenn Sie das Inappbrowser-Plugin installiert haben. Navigieren Sie zum Installieren mithilfe des Terminals zum Ordner www in Ihrem Projekt und geben Sie Folgendes ein:

phonegap plugin add org.apache.cordova.inappbrowser

oder

cordova plugin add org.apache.cordova.inappbrowser

Dann öffnet sich Ihr Link im Browser.

Dev01
quelle
Der Befehl phonegap local <command>wurde VERRINGERT. Der Befehl wurde an delegiert phonegap <command>. Der Befehl phonegap local <command>wird bald entfernt.
Ajay Suwalka
Ich weiß es in der Vergangenheit nicht, aber heutzutage ist es richtig, dieses Plugin zu installieren cordova plugin add cordova-plugin-inappbrowser.
Plinio FM
2

Ab Cordova 5.0 wird das Plugin InAppBrowser in der Cordova-Plugin-Registrierung umbenannt, daher sollten Sie es mit installieren

cordova plugin add cordova-plugin-inappbrowser --save

Dann benutze

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

Codevision
quelle
1

Ich verwende PhoneGap Build (v3.4.0) mit Schwerpunkt auf iOS und musste diesen Eintrag in meiner config.xml haben, damit PhoneGap das InAppBrowser-Plug-In erkennt.

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

Danach sollte die Verwendung von window.open (URL, Ziel) wie erwartet funktionieren, wie hier dokumentiert .

Kontaktmatt
quelle
1
Ich 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. Ibenutze nur das window.open (). Irgendein Rat?
Reinos
Wenn es richtig eingerichtet ist, sollte window.open einfach funktionieren. In meiner Situation öffnet window.open eine andere Browser-URL und es funktioniert in Ordnung. Stellen Sie sicher, dass die URL in Ordnung ist.
Kontaktmatt
Ich habe dies gerade mit Phonegap Build versucht und es ist ein Fehler mit: "Plugin nicht unterstützt: org.apache.cordova.inappbrowser"
David Ball
1

Ich hatte auch das Problem, dass der Link im Browser nicht geöffnet wurde. Hier ist meine Lösung mit den folgenden Schritten:

1: Installieren Sie dieses Cordova-Plugin.

cordova plugin add cordova-plugin-inappbrowser

2: Fügen Sie den offenen Link wie folgt in den HTML-Code ein.

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

3: Dies ist der wichtigste Schritt, aus dem ich viele Probleme hatte: Laden Sie die cordova.jsDatei herunter und fügen Sie sie in den wwwOrdner ein. Verweisen Sie dann in der index.htmlDatei darauf.

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

Diese Lösung funktioniert sowohl für die Umgebung Android und iPhone.

Tabish
quelle
-2

So was :

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