InAppBrowser esa nueva maravilla de PhoneGap

InAppBrowser es parte ahora de PhoneGap, permite abrir páginas web en ventana desde una aplicación #phonegap. Antes de eso, estaba como un plugin childBrowser, el cual funcionaba muy bien pero era configurarlo aparte. ¿Y como para que nos sirve esta extensión?

Por ejemplo para cargar una página web externa, un PDF, etcétera. El uso es muy sencillo:

var ref = window.open('http://google.com', '_blank','location=yes');
ref.addEventListener('loadstart', function(event) { console.log(event.type + ' - ' + event.url); } );
ref.addEventListener('loadstop', function(event) { console.log(event.type + ' - ' + event.url); } );
ref.addEventListener('exit', function(event) { console.log(event.type); } );

De esa forma, al ejecutar una acción con un botón o lo que sea, podemos abrir la página y utilizar sus eventos para controlar la aplicación. Por ejemplo, en mi caso, yo no muestro la dirección URL, por lo que no se ponen los botones de anterior, siguiente ni cerrar. ¿Cómo cierro entonces una página con un botón? (sin usar por ejemplo el botón back).

Lo que hago, es un truco como el siguiente: pongo un botón en la ventana inAppBrowser o una liga, que vaya a una hoja en blanco llamada sigraciasbye.html. Algo como <a href="sigraciasbye.html"> cerrar ventana </a> y tengo un código como este:

var ventana = window.open('http://myserver.com/','_blank','location=no');
ventana.addEventListener('loadstart',cerrado);

//luego, la función:
function cerrado(evento) {
   if(evento.url.match(/sigraciasbye/)) {
      ventana.close();
      ventana.removeEventListener('loadstart');
   }
}

de esa forma, en cuanto den click al botón de "cerrar ventana" se irá a la página "sigraciasbye.html" y el evento llamará a la función cerrado() que cerrará dicha ventana. Además, con esto, se pueden realizar cosas como saber en que página o sección están para eventos, por ejemplo enviar estadísticas a Google Analytics o lo que deseemos. No hay límites.

Aquí está la documentación http://docs.phonegap.com/en/2.3.0/cordova_inappbrowser_inappbrowser.md.html

+ fotos

Almacenado en android, PhoneGap, PhoneGap, Desarrollo Móvil, inappbrowser

por Jorge Martínez Mauricio :)

¿Algo que comentar?


Suscríbete por correo electrónico, recibirás los nuevos escritos antes que nadie y es gratis 😊

Relacionadas

    Fotografías de

    tar.mx es un blog sobre fotografía, tecnología y otras chunches