targetsdkversion - ¿Cómo puedo hacer que el InAppBrowser de Cordova proporcione una forma para que el usuario cierre el navegador cuando usa un dispositivo Android?

preference name android targetsdkversion

Question

Estoy usando Cordova InAppBrowser para mostrar contenido de un sitio externo en mi aplicación. Cuando abro el navegador en un iPhone, hay algunos botones en la parte inferior del InAppBrowser para cerrarlo o navegar de un lado a otro. El InAppBrowser en un dispositivo Android no tiene tales botones y no tiene una forma obvia para que el usuario cierre el navegador.

Sé cómo cerrar el InAppBrowser mediante programación, pero ¿cómo puede el usuario cerrarlo cuando usa un dispositivo Android?

Sé que el usuario puede presionar el botón Atrás del hardware para cerrar el navegador, pero (1) no es intuitivo: el botón Atrás generalmente significa "retroceder una página", y (2) eventualmente me gustaría cambiar el comportamiento de Haga clic en el botón Atrás para volver a una página dentro del sitio que se muestra dentro de InAppBrowser, en lugar de cerrar el navegador.

Answer 1

A partir de abril de 2016, estas respuestas están bastante desactualizadas. Tenía que hacer esto ahora, así que aquí está mi experiencia.

En primer lugar, el proyecto Cordova / Ionic se dividió en complementos. Lo que necesitaremos es el repositorio cordova-plugin-inAppBrowser .

PASO 1

Primero tenemos que clonarlo en algún lugar localmente o bifurcarlo en github / bitbucket. (Necesitaremos nuestro repositorio clonado permanentemente para cada nueva configuración de proyecto). Podemos fácilmente clonar el repositorio con este comando:

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

PASO 2

Entonces tenemos que hacer los cambios solicitados al proyecto. Para que el comportamiento de la barra de url en Android sea el mismo que en iOS, debemos mostrar la barra de menú siempre y mostrar la barra de url solo si el usuario solicita la barra de menú. El código que controla esto está en el archivo /src/android/InAppBrowser.java .

Tenemos que cambiar las líneas entre 707-716 . (Nota: estos números de línea pueden cambiar si modifican el archivo).

Tenemos que cambiar el código de este

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

a esto:

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

Entonces, lo que hicimos aquí es que agregamos las barras de herramientas siempre con los botones de salida / avance / retroceso y agregamos la barra de URL solo si el usuario desea la barra completa. Este es el comportamiento de la versión de iOS.

Además, si queremos eliminar los botones de avance / retroceso porque Android tiene un botón de retroceso nativo, entonces debemos comentarlos y agregarlos solo si el uso desea la barra de menú completa. Entonces nuestro código debería verse así:

// 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);

PASO 3

Tenemos que agregar el complemento modificado a nuestro proyecto, si desea esto solo una vez, simplemente ejecute

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

en lugar de

cordova plugin add cordova-plugin-inappbrowser 

Nota: debe conservar su repositorio modificado porque el cordova plugin add comando para recuperarlos desde su repositorio cada vez que configure su proyecto.

Answer 2

Acabo de encontrar una solución que puede ayudarlo a satisfacer mejor sus necesidades y / o ayudar a otras personas.

En resumen, puede crear una página HTML ''ficticia'', agregar JavaScript en su aplicación para detectar cuándo se carga esa página y, cuando se carga, cerrar InAppBrowser.

Consulte aquí: Creación de Phonegap: abra la página externa en InAppBrowser o childbrowser sin barra de herramientas y ciérrela.

Answer 3

Como lo indica elMarquis, debe agregar "location = yes" para obtener el botón "Done" en un dispositivo Android. Sin embargo, si desea obtener el botón Hecho por sí solo, sin la barra de direcciones, es bastante fácil hacerlo al hacer un cambio en el código fuente de cordova.

Obtuve la información de este grupo de Google: https://groups.google.com/forum/?fromgroups=#!topic/phonegap/mUcBcjPISgg

Aquí hay algunas instrucciones paso a paso:

1. Descargue el código fuente de cordova:

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

2. Descargue el commec codec lib desde here

3. Abrir herramientas de desarrollo de Android

4. Importa el proyecto de Córdoba a tu espacio de trabajo

   File > Import... > Existing Projects into Workspace

5. Cree un directorio libs y copie en él el archivo commons-codec-1.7.jar descargado.

6. Agregue una carpeta gen al proyecto (requerido por el archivo .classpath, pero no incluido en la descarga de git ya que git no permite carpetas vacías)
7. Vaya a Proyecto> Construir todo. El proyecto debe construirse sin errores.
8. Abra InAppBrowser.java y busque "toolbar.addView (edittext);" (Línea 468 en la versión cordova que descargué).
9. Comenta esa línea.
10. Construye el proyecto de nuevo.
11. Copie el archivo bin / cordova.jar en cualquier proyecto en el que esté usando cordova.

Esperemos que eso ayude a alguien más.

Answer 4

Esto es posible ajustando el ''InAppBrowser.java''. Sé que esto es un poco raro, pero esta es la única opción que tuve. Pero esos pequeños retoques que hice en el archivo java ahora me permiten navegar dentro de las páginas de mi aplicación.

Aquí está el cambio que se realizará en InAppBrowser.java. En el método ''ejecutar'' dentro del método showWebPage, habrá un código de escucha algo como esto,

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

Debajo de esa línea agregue el siguiente código,

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

Answer 5

Para aquellos de nosotros que usamos Ionic ( ionicframework.com ) y / o ngcordova ( ngcordova.com ). El siguiente código abrirá el inappbrowser y luego cerrará el diálogo a través de un enlace <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()

Answer 6

Para aquellos que buscan un botón "Listo" nativo en el pie de página de Android (similar a iOS), he implementado una característica de este tipo en este fork de cordova-plugin-inappbrowser .

Actualización: enero 2018

Mi solicitud de extracción se ha fusionado en el repositorio oficial del complemento , por lo que puede esperar la próxima versión (que será> = 2.0.2) o instalar directamente desde Github, por ejemplo:

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

Respuesta original

La implementación es una extensión de PR # 246 que actualmente ( 4 de diciembre de 2017 ) está a la espera de aprobación para fusionarse. Una vez hecho esto, abriré un número separado y relaciones públicas para fusionar esto nuevamente en el maestro cordova-plugin-inappbrowser .

Aquí hay algunas capturas de pantalla con las opciones relevantes:

ubicación = sí, pie de página = sí

ubicación = no, pie de página = sí

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

Answer 7

Para mantener la opción ''ubicación = sí'' para que se comporte igual en Android e iOS, sugeriría modificar la corrección de Troy con el siguiente cambio que mueve la instrucción if para controlar "toolbar.addView (edittext);" y no toda la barra de herramientas.

// 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);

Comparado con el código original:

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

Answer 8

Al agregar "location=yes" al final de su llamada, se colocará una barra de direcciones y el botón HECHO en la parte superior de la ventana en Android. (Aparece en la parte inferior de la ventana en iOS). Al hacer clic en Hecho se cierra la ventana.

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