InAppBrowser

El InAppBrowser es un navegador web que se muestra en la aplicación cuando se llama window.open.

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

Descripción

El objeto devuelto desde una llamada a window.open.

A partir de la versión 3.0, Cordova implementa nivel de dispositivo APIs como plugins. Uso de la CLI plugin comando, que se describe en la interfaz de línea de comandos, para añadir o eliminar esta característica para un proyecto:

    $ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git
    $ cordova plugin rm org.apache.cordova.core.inappbrowser

Estos comandos se aplican a todas las plataformas específicas, sino modificar las opciones de configuración específicas de la plataforma que se describen a continuación:

Android (enapp/res/xml/config.xml)

<feature name="InAppBrowser">
    <param name="android-package" value="org.apache.cordova.InAppBrowser" />
</feature>

(en iOSconfig.xml)

<feature name="InAppBrowser">
    <param name="ios-package" value="CDVInAppBrowser" />
</feature>

Windows Phone 7 y 8 (enconfig.xml)
```
<feature name="InAppBrowser" />
```

Algunas plataformas que soportan esta característica sin necesidad de ninguna configuración especial. Ver soporte de plataforma para tener una visión general.

addEventListener

Añade un detector para un evento de la InAppBrowser.

ref.addEventListener(eventname, callback);

ref: referencia a la InAppBrowser ventana (InAppBrowser)
eventName: el evento para escuchar (String)
- loadstart: evento desencadena cuando el InAppBrowser comienza a cargar una dirección URL.
- loadstop: evento desencadena cuando el InAppBrowser termina cargando una dirección URL.
- loaderror: evento desencadena cuando el InAppBrowser encuentra un error al cargar una dirección URL.
- salida: evento desencadena cuando el InAppBrowser se cierra la ventana.
devolución de llamada: la función que se ejecuta cuando se desencadene el evento. La función se pasa un InAppBrowserEvent objeto como parámetro.

Plataformas soportadas

Android
BlackBerry
iOS
Windows Phone 7 y 8

Ejemplo rápido

var ref = window.open('http://apache.org', '_blank', 'location=yes');
ref.addEventListener('loadstart', function() { alert(event.url); });

Ejemplo completo

<!DOCTYPE html>
<html>
  <head>
    <title>InAppBrowser.addEventListener Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // device APIs are available
    //
    function onDeviceReady() {
         var ref = window.open('http://apache.org', '_blank', 'location=yes');
         ref.addEventListener('loadstart', function(event) { alert('start: ' + event.url); });
         ref.addEventListener('loadstop', function(event) { alert('stop: ' + event.url); });
         ref.addEventListener('loaderror', function(event) { alert('error: ' + event.message); });
         ref.addEventListener('exit', function(event) { alert(event.type); });
    }

    </script>
  </head>
  <body>
  </body>
</html>

removeEventListener

Elimina un detector para un evento de la InAppBrowser.

ref.removeEventListener (eventname, "callback");

ref: referencia a la InAppBrowser ventana. (InAppBrowser)
eventName: dejar de escuchar para el evento. (String)
- loadstart: evento desencadena cuando el InAppBrowser comienza a cargar una dirección URL.
- loadstop: evento desencadena cuando el InAppBrowser termina cargando una dirección URL.
- loaderror: evento desencadena cuando el InAppBrowser se encuentra con un error al cargar una dirección URL.
- salida: evento desencadena cuando el InAppBrowser se cierra la ventana.
devolución de llamada: la función a ejecutar cuando se desencadene el evento. La función se pasa un InAppBrowserEvent objeto.

Plataformas soportadas

Android
BlackBerry
iOS
Windows Phone 7 y 8

Ejemplo rápido

var ref = window.open('http://apache.org', '_blank', 'location=yes');
var myCallback = function() { alert(event.url); }
ref.addEventListener('loadstart', myCallback);
ref.removeEventListener('loadstart', myCallback);

Ejemplo completo

<!DOCTYPE html>
<html>
  <head>
    <title>InAppBrowser.removeEventListener Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Global InAppBrowser reference
    var iabRef = null;

    function iabLoadStart(event) {
        alert(event.type + ' - ' + event.url);
    }

    function iabLoadStop(event) {
        alert(event.type + ' - ' + event.url);
    }

    function iabLoadError(event) {
        alert(event.type + ' - ' + event.message);
    }

    function iabClose(event) {
         alert(event.type);
         iabRef.removeEventListener('loadstart', iabLoadStart);
         iabRef.removeEventListener('loadstop', iabLoadStop);
         iabRef.removeEventListener('loaderror', iabLoadError);
         iabRef.removeEventListener('exit', iabClose);
    }

    // device APIs are available
    //
    function onDeviceReady() {
         iabRef = window.open('http://apache.org', '_blank', 'location=yes');
         iabRef.addEventListener('loadstart', iabLoadStart);
         iabRef.addEventListener('loadstop', iabLoadStop);
         iabRef.removeEventListener('loaderror', iabLoadError);
         iabRef.addEventListener('exit', iabClose);
    }

    </script>
  </head>
  <body>
  </body>
</html>

cerrar

Cierra la ventana de InAppBrowser.

Ref.Close();

ref: referencia a la InAppBrowser ventana (InAppBrowser)

Plataformas soportadas

Android
BlackBerry
iOS
Windows Phone 7 y 8

Ejemplo rápido

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

Ejemplo completo

<!DOCTYPE html>
<html>
  <head>
    <title>InAppBrowser.close Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // device APIs are available
    //
    function onDeviceReady() {
         var ref = window.open('http://apache.org', '_blank', 'location=yes');
         // close InAppBrowser after 5 seconds
         setTimeout(function() {
             ref.close();
         }, 5000);
    }

    </script>
  </head>
  <body>
  </body>
</html>

Mostrar

Muestra una ventana InAppBrowser que abrió sus puertas ocultada. Esto no tiene efecto si el InAppBrowser ya era visible.

Ref.Show();

ref: referencia a la (ventana) InAppBrowserInAppBrowser)

Plataformas soportadas

Android
BlackBerry
iOS

Ejemplo rápido

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

Ejemplo completo

<!DOCTYPE html>
<html>
  <head>
    <title>InAppBrowser.show Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for Cordova to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Cordova is ready
    //
    function onDeviceReady() {
         var ref = window.open('http://apache.org', '_blank', 'hidden=yes');
         ref.addEventListener('loadstop', function(event) {
             alert('background window loaded'); 
         });
         // close InAppBrowser after 5 seconds
         setTimeout(function() {
             ref.close();
         }, 5000);
    }

    </script>
  </head>
  <body>
  </body>
</html>

executeScript

Inyecta código JavaScript en la ventana de InAppBrowser

ref.executeScript (datos, "callback");

ref: referencia a la InAppBrowser ventana. (InAppBrowser)
injectDetails: detalles de la secuencia de comandos para ejecutar, o especificar un file o code clave. (Objeto)
- archivo: URL de la secuencia de comandos para inyectar.
- código: texto de la escritura para inyectar.
devolución de llamada: la función que se ejecuta después de inyecta el código JavaScript.
- Si el script inyectado es de tipo code , la devolución de llamada se ejecuta con un solo parámetro, que es el valor devuelto por el guión, envuelto en un Array . Para los scripts de varias líneas, este es el valor devuelto de la última declaración, o la última expresión evaluada.

Plataformas soportadas

Android
BlackBerry
iOS

Ejemplo rápido

var ref = window.open('http://apache.org', '_blank', 'location=yes');
ref.addEventListener('loadstop', function() {
    ref.executeSript({file: "myscript.js"});
});

Ejemplo completo

<!DOCTYPE html>
<html>
  <head>
    <title>InAppBrowser.executeScript Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Global InAppBrowser reference
    var iabRef = null;

    // Inject our custom JavaScript into the InAppBrowser window
    //
    function replaceHeaderImage() {
        iabRef.executeScript({
            code: "var img=document.querySelector('#header img'); img.src='http://cordova.apache.org/images/cordova_bot.png';"
        }, function() {
            alert("Image Element Successfully Hijacked");
        }
    }

    function iabClose(event) {
         iabRef.removeEventListener('loadstop', replaceHeaderImage);
         iabRef.removeEventListener('exit', iabClose);
    }

    // device APIs are available
    //
    function onDeviceReady() {
         iabRef = window.open('http://apache.org', '_blank', 'location=yes');
         iabRef.addEventListener('loadstop', replaceHeaderImage);
         iabRef.addEventListener('exit', iabClose);
    }

    </script>
  </head>
  <body>
  </body>
</html>

insertCSS

Inyecta CSS en la ventana de InAppBrowser.

ref.insertCSS (datos, "callback");

ref: referencia a la InAppBrowser ventana (InAppBrowser)
injectDetails: detalles de la secuencia de comandos para ejecutar, o especificar un file o code clave. (Objeto)
- archivo: URL de la hoja de estilos para inyectar.
- código: texto de la hoja de estilos para inyectar.
devolución de llamada: la función que se ejecuta después de inyectar el CSS.

Plataformas soportadas

Android
BlackBerry
iOS

Ejemplo rápido

var ref = window.open('http://apache.org', '_blank', 'location=yes');
ref.addEventListener('loadstop', function() {
    ref.insertCSS({file: "mystyles.css"});
});

Ejemplo completo

<!DOCTYPE html>
<html>
  <head>
    <title>InAppBrowser.insertCSS Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Global InAppBrowser reference
    var iabRef = null;

    // Inject our custom CSS into the InAppBrowser window
    //
    function changeBackgroundColor() {
        iabRef.insertCSS({
            code: "body { background: #ffff00"
        }, function() {
            alert("Styles Altered");
        }
    }

    function iabClose(event) {
         iabRef.removeEventListener('loadstop', changeBackgroundColor);
         iabRef.removeEventListener('exit', iabClose);
    }

    // device APIs are available
    //
    function onDeviceReady() {
         iabRef = window.open('http://apache.org', '_blank', 'location=yes');
         iabRef.addEventListener('loadstop', changeBackgroundColor);
         iabRef.addEventListener('exit', iabClose);
    }

    </script>
  </head>
  <body>
  </body>
</html>

InAppBrowserEvent

El objeto que se pasa a la función de devolución de llamada de un addEventListener llamado a un InAppBrowser objeto.

Propiedades

tipo: eventname, ya sea loadstart , loadstop , loaderror , o exit . (String)
URL: la URL que se cargó. (String)
código: el código de error, sólo en el caso de loaderror . (Número)
mensaje: el mensaje de error, sólo en el caso de loaderror . (String)

window.open

Se abre una dirección URL en una nueva instancia de InAppBrowser, la instancia actual del navegador o el navegador del sistema.

var ref = window.open(url, target, options);

ref: referencia a la InAppBrowser ventana. (InAppBrowser)
URL: el URL para cargar (String). Llame a encodeURI() en este si la URL contiene caracteres Unicode.
target: el objetivo en el que se carga la URL, un parámetro opcional que se utiliza de forma predeterminada _self. (String)
- _self: se abre en el Cordova WebView si la URL está en la lista blanca, de lo contrario se abre en el InAppBrowser.
- _blank: abre en el InAppBrowser.
- _system: se abre en el navegador del sistema.
options: opciones para el InAppBrowser. Opcional, contumaz a: location=yes. (String)

La cadena de options no debe contener ningún espacio en blanco, y los pares de nombre y valor de cada característica deben estar separados por una coma. Los nombres de función son minúsculas. Todas las plataformas admiten el valor siguiente:
- location: se establece en yes o no para activar o desactivar la barra de ubicación de la InAppBrowser.
  
  Android sólo
- closebuttoncaption - establece en una cadena que será el título para el botón "Done".
- hidden - set ' Yes ' para crear el navegador y cargar la página, pero no lo demuestra. El evento load se activará cuando la carga está completa. Omitir o establecer que 'no' (por defecto) para que el navegador abra y carga normalmente.
- clearcache - set ' Yes ' para tener la caché del navegador cookies antes de que se abra la nueva ventana
- clearsessioncache - set ' Yes ' para tener la caché de cookie de sesión antes de que se abra la nueva ventana
  
  iOS sólo
- closebuttoncaption - establece en una cadena que será el título para el botón "Done". Tenga en cuenta que deberás localizar este valor por sí mismo.
- hidden - set ' Yes ' para crear el navegador y cargar la página, pero no lo demuestra. El evento load se activará cuando la carga está completa. Omitir o establecer que 'no' (por defecto) para que el navegador abra y carga normalmente.
- barra de herramientas - set al 'yes' o 'no' para activar o desactivar el la barra de herramientas para el InAppBrowser (por defecto 'yes')
- enableViewportScale: Set a yes o no para evitar viewport escalar a través de una etiqueta meta (por defecto a no).
- mediaPlaybackRequiresUserAction: Set a yes o no para evitar HTML5 audio o vídeo de reproducción automática (por defecto a no).
- allowInlineMediaPlayback: establecer a yes o no permiten la reproducción de medios en línea HTML5, mostrando en la ventana del navegador en lugar de una interfaz específica del dispositivo de reproducción. Elemento video de HTML también debe incluir el atributo de webkit-playsinline (por defecto a no)
- keyboardDisplayRequiresUserAction: se establece en yes o no para abrir el teclado cuando elementos de formulario reciben el foco mediante llamada de JavaScript de focus() (por defecto a yes).
- suppressesIncrementalRendering: se establece en yes o no para esperar hasta que todos los nuevos contenidos de vista se recibieron antes de ser prestados (por defecto a no).
- presentationstyle: se establece en pagesheet, formsheet o fullscreen para definir el estilo de la presentación (por defecto a fullscreen).
- transitionstyle: se establece en fliphorizontal, crossdissolve o coververtical para definir el estilo de transición (por defecto coververtical).

Plataformas soportadas

Android
BlackBerry
iOS
Windows Phone 7 y 8

Ejemplo rápido

var ref = window.open('http://apache.org', '_blank', 'location=yes');
var ref2 = window.open(encodeURI('http://ja.m.wikipedia.org/wiki/ハングル'), '_blank', 'location=yes');

Ejemplo completo

<!DOCTYPE html>
<html>
  <head>
    <title>window.open Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // device APIs are available
    //
    function onDeviceReady() {
        // external url
        var ref = window.open(encodeURI('http://apache.org'), '_blank', 'location=yes');
        // relative document
        ref = window.open('next.html', '_self');
    }

    </script>
  </head>
  <body>
  </body>
</html>

Documentación Apache Cordova

InAppBrowser

Guías

Referencia de la API

InAppBrowser

Descripción

Métodos

Acceso a la función

addEventListener

Plataformas soportadas

Ejemplo rápido

Ejemplo completo

removeEventListener

Plataformas soportadas

Ejemplo rápido

Ejemplo completo

cerrar

Plataformas soportadas

Ejemplo rápido

Ejemplo completo

Mostrar

Plataformas soportadas

Ejemplo rápido

Ejemplo completo

executeScript

Plataformas soportadas

Ejemplo rápido

Ejemplo completo

insertCSS

Plataformas soportadas

Ejemplo rápido

Ejemplo completo

InAppBrowserEvent

Propiedades

window.open

Android sólo

iOS sólo

Plataformas soportadas

Ejemplo rápido

Ejemplo completo