Córdoba - InAppBrowser

Este complemento se utiliza para abrir el navegador web dentro de la aplicación Cordova.

Paso 1: instalación del complemento

Necesitamos instalar este complemento en command prompt ventana antes de que podamos usarlo.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-inappbrowser

Paso 2: botón Agregar

Agregaremos un botón que se usará para abrir inAppBrowser ventana en index.html.

Paso 3: agregar escucha de eventos

Ahora agreguemos un detector de eventos para nuestro botón en onDeviceReady funcionar en index.js.

document.getElementById("openBrowser").addEventListener("click", openBrowser);

Paso 4 - Crear función

En este paso, estamos creando una función que abrirá el navegador dentro de nuestra aplicación. Lo estamos asignando alref variable que podemos usar más tarde para agregar detectores de eventos.

function openBrowser() {
   var url = 'https://cordova.apache.org';
   var target = '_blank';
   var options = "location = yes"
   var ref = cordova.InAppBrowser.open(url, target, options);
   
   ref.addEventListener('loadstart', loadstartCallback);
   ref.addEventListener('loadstop', loadstopCallback);
   ref.addEventListener('loaderror', loaderrorCallback);
   ref.addEventListener('exit', exitCallback);

   function loadstartCallback(event) {
      console.log('Loading started: '  + event.url)
   }

   function loadstopCallback(event) {
      console.log('Loading finished: ' + event.url)
   }

   function loaderrorCallback(error) {
      console.log('Loading error: ' + error.message)
   }

   function exitCallback() {
      console.log('Browser is closed...')
   }
}

Si presionamos BROWSER , veremos el siguiente resultado en pantalla.

La consola también escuchará eventos. loadstart El evento se activará cuando la URL comience a cargarse y loadstopse activará cuando se cargue la URL. Lo podemos ver en consola.

Una vez que cerramos el navegador, exit el evento se disparará.

Hay otras opciones posibles para la ventana InAppBrowser. Lo explicaremos en la tabla a continuación.

S. No	opción y detalles
1	location Se utiliza para activar o desactivar la barra de ubicación del navegador. Los valores sonyes o no.
2	hidden Se usa para ocultar o mostrar inAppBrowser. Los valores sonyes o no.
3	clearCache Se utiliza para borrar la caché de cookies del navegador. Los valores sonyes o no.
4	clearsessioncache Se utiliza para borrar la caché de cookies de sesión. Los valores sonyes o no.
5	zoom Se utiliza para ocultar o mostrar los controles de zoom del navegador de Android. Los valores sonyes o no.
6	hardwareback yes para usar el botón de retroceso del hardware para navegar hacia atrás a través del historial del navegador. no para cerrar el navegador una vez que se hace clic en el botón Atrás.

Nosotros podemos usar ref(referencia) variable para algunas otras funcionalidades. Le mostraremos algunos ejemplos rápidos. Para eliminar los oyentes de eventos, podemos usar:

ref.removeEventListener(eventname, callback);

Para cerrar InAppBrowser podemos usar -

ref.close();

Si abrimos una ventana oculta, podemos mostrarla:

ref.show();

Incluso el código JavaScript se puede inyectar en InAppBrowser -

var details = "javascript/file/url"
ref.executeScript(details, callback);

El mismo concepto se puede utilizar para inyectar CSS:

var details = "css/file/url"
ref.inserCSS(details, callback);