web-dev-qa-db-ger.com

Wie kann ich mit dem cordova InAppBrowser dem Benutzer eine Möglichkeit bieten, den Browser zu schließen, wenn er ein Android-Gerät verwendet?

Ich verwende den cordova InAppBrowser, um Inhalte von einer externen Site in meiner App anzuzeigen. Wenn ich den Browser auf einem iPhone öffne, befinden sich unten im InAppBrowser einige Schaltflächen, mit denen Sie den Browser schließen oder hin und her navigieren können. Der InAppBrowser auf einem Android-Gerät hat keine solchen Schaltflächen und hat keine offensichtliche Möglichkeit für den Benutzer, den Browser zu schließen.

Ich weiß, wie man den InAppBrowser programmgesteuert schließt, aber wie kann der Benutzer es bei einem Android-Gerät schließen?

Ich weiß, dass der Benutzer auf die Zurück-Schaltfläche der Hardware klicken kann, um den Browser zu schließen, aber (1) das ist nicht intuitiv - die Zurück-Schaltfläche bedeutet normalerweise "eine Seite zurückgehen", und (2) möchte ich eventuell das Verhalten des ändern Schaltfläche "Zurück", um eine Seite innerhalb der Website zu öffnen, die im InAppBrowser angezeigt wird, anstatt den Browser zu schließen.

20
Troy

Durch Hinzufügen von "location=yes" am Ende Ihres Anrufs werden bei Android eine Adressleiste und die Schaltfläche DONE oben im Fenster angezeigt. (Es erscheint in iOS am unteren Rand des Fensters). Durch Klicken auf Fertig wird das Fenster geschlossen.

var ref = window.open('http://Apache.org', '_blank', 'location=yes');
10
elMarquis

Für diejenigen von uns, die Ionic ( ionicframework.com ) und/oder Ngcordova ( Ngcordova.com ) verwenden. Der folgende Code startet den inappbrowser und schließt den Dialog über einen Link <a href="/mobile/close">close</a>.

  $cordovaInAppBrowser.open('http://localhost:3000/#/mypath/', '_blank', options).then((event) ->
    # success
    return
    ).catch (event) ->
      # error
      return

  $rootScope.$on '$cordovaInAppBrowser:loadstart', (e, event) ->
    $log.log 'loadstart', e, event
    if event.url.match('mobile/close')
      $cordovaInAppBrowser.close()
14
Stone

Für diejenigen, die eine native "Done" -Taste in der Fußzeile für Android suchen (ähnlich wie iOS), habe ich eine solche Funktion auf dieser Gabel von cordova-plugin-inappbrowser implementiert.

Update: Januar 2018

Mein Pull-Auftrag wurde in das offizielle Plugin-Repo , Eingefügt. Sie können also auf das nächste Release warten (das ist> = 2.0.2) oder direkt von Github installieren, z. B .:

cordova plugin add https://github.com/Apache/cordova-plugin-inappbrowser

Originalantwort

Die Implementierung ist eine Erweiterung von PR # 246 , die derzeit (4. Dezember 2017) auf die Genehmigung der Zusammenlegung wartet. Sobald dies erledigt ist, öffne ich eine separate Ausgabe und PR, um diese wieder mit dem Master cordova-plugin-inappbrowser zusammenzuführen.

Hier sind einige Screenshots mit den relevanten Optionen:

location = yes, footer = yes

 

location = no, footer = yes

 

location = yes, footer = yes, closebuttoncaption = Done

 

location = no, footer = yes, closebuttoncaption = Done, closebuttoncolor = # 0000ff

 

location = no, footer = yes, footercolor = # 0000ff, closebuttoncaption = Done

 

location = no, footer = yes, footercolor = # 00ff00, closebuttoncaption = Done, closebuttoncolor = # 0000ff

 

location = no, footer = yes, footercolor = # CC000000, closebuttoncaption = Done, closebuttoncolor = # 00FFFF

 

7
DaveAlden

Um die Option 'location = yes' beizubehalten, um sich auf Android und iOS gleich zu verhalten, würde ich vorschlagen, Troys Fix mit der folgenden Änderung zu ändern, die die if-Anweisung zur Steuerung der "toolbar.addView (edittext); und nicht die gesamte Symbolleiste.

// Add the views to our toolbar
toolbar.addView(actionButtonContainer);
if (getShowLocationBar()) {
    toolbar.addView(edittext);
}
toolbar.addView(close);

// Add our toolbar to our main view/layout
main.addView(toolbar);

Im Vergleich zum Originalcode:

// Add the views to our toolbar
toolbar.addView(actionButtonContainer);
toolbar.addView(edittext);
toolbar.addView(close);

// Don't add the toolbar if its been disabled
if (getShowLocationBar()) {
    // Add our toolbar to our main view/layout
    main.addView(toolbar);
}
5
Jello

Wie von elMarquis ausgeführt, müssen Sie "location = yes" hinzufügen, um die Schaltfläche "Done" auf einem Android-Gerät zu erhalten. Wenn Sie jedoch die Schaltfläche "Fertig" ohne Adressleiste erhalten möchten, können Sie dies ganz einfach tun, indem Sie eine Änderung am Cordova-Quellcode vornehmen.

Ich habe die Informationen von dieser Google-Gruppe erhalten: https://groups.google.com/forum/?fromgroups=#!topic/phonegap/mUcBcjPISgg

Hier sind einige Schritt-für-Schritt-Anweisungen:

  1. Laden Sie den Cordova-Quellcode herunter: 

    git clone https://github.com/Apache/cordova-plugin-inappbrowser

  2. Laden Sie den Commons-Codec lib von hier herunter.

  3. Öffnen Sie die Android Developer Tools
  4. Importieren Sie das Cordova-Projekt in Ihren Arbeitsbereich 

    File > Import... > Existing Projects into Workspace

  5. Erstellen Sie ein libs-Verzeichnis und kopieren Sie die heruntergeladene commons-codec-1.7.jar-Datei in dieses Verzeichnis.

  6. Fügen Sie dem Projekt einen gen-Ordner hinzu (erforderlich für die .classpath-Datei, jedoch nicht im git-Download enthalten, da git keine leeren Ordner zulässt).
  7. Gehen Sie zu Projekt> Alles erstellen. Das Projekt sollte fehlerfrei bauen.
  8. Öffnen Sie InAppBrowser.Java und suchen Sie nach "toolbar.addView (edittext);" (Zeile 468 in der Cordova-Version, die ich heruntergeladen habe).
  9. Kommentieren Sie diese Zeile aus.
  10. Bauen Sie das Projekt erneut auf.
  11. Kopieren Sie die Datei bin/cordova.jar in das Projekt, in dem Sie cordova verwenden.

Hoffentlich hilft das jemand anderem.

4
Troy

Ab April 2016 sind diese Antworten ziemlich veraltet. Ich musste das jetzt tun, also hier ist meine Erfahrung. 

Zunächst wurde das Cordova/Ionic-Projekt in Plugins aufgeteilt. Was wir brauchen, ist das cordova-plugin-inAppBrowser repo.

SCHRITT 1

Zuerst müssen wir es irgendwo lokal klonen oder es auf github/bitbucket abspalten. (Wir werden unser geklontes Repo permanent für jedes neue Projektsetup benötigen.) Das Repo kann leicht mit diesem Befehl geklont werden: 

git clone [email protected]:Apache/cordova-plugin-inappbrowser.git

SCHRITT 2

Dann müssen wir die gewünschten Änderungen am Projekt vornehmen. Um das Verhalten der URL-Leiste auf Android auf das gleiche wie auf iOS zu ändern, müssen Sie die Menüleiste immer anzeigen und die URL-Leiste nur anzeigen, wenn der Benutzer die Menüleiste anfordert. Der Code, der dies steuert, befindet sich in der /src/Android/InAppBrowser.Java-Datei.

Wir müssen die Zeilen zwischen 707-716 ändern. (Hinweis: Diese Zeilennummern können sich ändern, wenn sie die Datei ändern.)

Wir müssen den Code hieraus ändern

// Add the views to our toolbar
toolbar.addView(actionButtonContainer);
toolbar.addView(edittext);
toolbar.addView(close);

// Don't add the toolbar if its been disabled
if (getShowLocationBar()) {
    // Add our toolbar to our main view/layout
    main.addView(toolbar);
}

zu diesem: 

// Add the views to our toolbar
toolbar.addView(actionButtonContainer);
if (getShowLocationBar()) {
    toolbar.addView(edittext);
}
toolbar.addView(close);

main.addView(toolbar);

Was wir hier gemacht haben, ist, dass wir die Symbolleisten immer mit den Schaltflächen Beenden/Vorwärts/Zurück hinzufügen und die URL-Leiste nur dann hinzufügen, wenn der Benutzer die vollständige Leiste möchte. Dies ist das Verhalten der iOS-Version. 

Wenn wir außerdem die Vorwärts-/Rückwärts-Schaltflächen entfernen möchten, weil Android eine native Zurück-Schaltfläche besitzt, müssen wir sie auskommentieren und nur hinzufügen, wenn der Benutzer die vollständige Menüleiste wünscht. Unser Code sollte also so aussehen: 

// actionButtonContainer.addView(back);
// actionButtonContainer.addView(forward);

// Add the views to our toolbar
toolbar.addView(actionButtonContainer);
if (getShowLocationBar()) {
    toolbar.addView(edittext);
    // We add this here if the user want the full bar, then we need this buttons.
    actionButtonContainer.addView(back);
    actionButtonContainer.addView(forward);
}
toolbar.addView(close);

SCHRITT 3

Wir müssen das modifizierte Plugin unserem Projekt hinzufügen, wenn Sie dies nur einmal wünschen, dann starten Sie es einfach 

cordova plugin add https://github.com/username/cordova-plugin-inappbrowser.git
// or
cordova plugin add https://[email protected]/UserName/cordova-plugin-inappbrowser.git

anstatt 

cordova plugin add cordova-plugin-inappbrowser 

Hinweis: Sie müssen Ihr modifiziertes Repo beibehalten, da der Befehl cordova plugin add jedes Mal, wenn Sie Ihr Projekt einrichten, aus Ihrem Repository abgerufen wird. 

2
NoNameProvided

Ich habe gerade eine Lösung gefunden, die helfen kann, Ihre Bedürfnisse besser zu erreichen und/oder anderen Menschen zu helfen.

Zusammenfassend können Sie eine 'Dummy'-HTML-Seite erstellen und in Ihrer App JavaScript hinzufügen, um zu erkennen, wann diese Seite geladen ist und wenn sie geladen ist, den InAppBrowser zu schließen.

Siehe hier: Phonegap build - Externe Seite in InAppBrowser oder Childbrowser ohne Symbolleiste öffnen und schließen?

0
Matty J

Dies ist möglich, indem Sie 'InAppBrowser.Java' anpassen. Ich weiß, das ist etwas komisch, aber dies ist die einzige Wahl, die ich hatte. Aber diese kleinen Verbesserungen, die ich an der Java-Datei vorgenommen habe, ermöglichen es mir jetzt, innerhalb der Seiten meiner App zurück zu navigieren.

Hier ist die Änderung, die in InAppBrowser.Java, .__ vorgenommen werden soll. In der Methode 'run' innerhalb der Methode showWebPage wird ein Listener-Code wie dieser angezeigt:

dialog.setOnDismissListener(new DialogInterface.OnDismissListener() {
                    public void onDismiss(DialogInterface dialog) {     
                        closeDialog();
                    }
});

Fügen Sie unterhalb dieser Zeile den folgenden Code hinzu:

dialog.setOnKeyListener(new DialogInterface.OnKeyListener() {                   
@Override
     public boolean onKey(DialogInterface dialog, int keyCode, KeyEvent event) {
         if (event.getAction()!=KeyEvent.ACTION_DOWN)
             return true;               
         if(keyCode==KeyEvent.KEYCODE_BACK){
             goBack();
             return true;
         }else {
             return false;
          }
      }
});
0
Suresh Raja