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 (8)
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.
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.
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.
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:
Descargue el código fuente de cordova:
git clone https://github.com/apache/cordova-plugin-inappbrowser
Descargue el commec codec lib desde here
- Abrir herramientas de desarrollo de Android
Importa el proyecto de Córdoba a tu espacio de trabajo
File > Import... > Existing Projects into Workspace
Cree un directorio
libs
y copie en él el archivocommons-codec-1.7.jar
descargado.- 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) - Vaya a Proyecto> Construir todo. El proyecto debe construirse sin errores.
- Abra InAppBrowser.java y busque "toolbar.addView (edittext);" (Línea 468 en la versión cordova que descargué).
- Comenta esa línea.
- Construye el proyecto de nuevo.
- Copie el archivo bin / cordova.jar en cualquier proyecto en el que esté usando cordova.
Esperemos que eso ayude a alguien más.
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;
}
}
});
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()
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
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);
}
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'');