InAppBrowser

Il InAppBrowser è un web browser che visualizza in app quando si chiamawindow.open.

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

Descrizione

L'oggetto restituito da una chiamata awindow.open.

Metodi

• addEventListener
• removeEventListener
• close
• show
• executeScript
• insertCSS

La funzionalità di accesso

A partire dalla versione 3.0, Cordova implementa le API a livello di dispositivo come plugin. Utilizzare la CLI plugin comando, descritto in Command-Line Interface, aggiungere o rimuovere questa funzionalità per un progetto:

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

Questi comandi si applicano a tutte le piattaforme mirate, ma modificano le impostazioni di configurazione specifiche della piattaforma descritte di seguito:

• Android (inapp/res/xml/config.xml)

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

• iOS (inconfig.xml)

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

• Windows Phone 7 e 8 (inconfig.xml)

  <feature name="InAppBrowser" />
  

Alcune piattaforme possono supportare questa funzionalità senza richiedere alcuna configurazione speciale. Per una panoramica, vedere supporto della piattaforma.

addEventListener

Aggiunge un listener per un evento dalInAppBrowser.

ref.addEventListener(eventname, callback);

• Rif: fare riferimento alla InAppBrowser finestra (InAppBrowser)

• EventName: l'evento per l'ascolto (String)

  • loadstart: evento viene generato quando il InAppBrowser comincia a caricare un URL.
  • loadstop: evento viene generato quando il InAppBrowser termina il caricamento di un URL.
  • LoadError: evento viene generato quando il InAppBrowser rileva un errore durante il caricamento di un URL.
  • uscita: evento viene generato quando il InAppBrowser finestra è chiusa.

• richiamata: la funzione che viene eseguito quando viene generato l'evento. La funzione viene passata un InAppBrowserEvent oggetto come parametro.

Piattaforme supportate

• Android
• BlackBerry
• iOS
• Windows Phone 7 e 8

Esempio rapido

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

Esempio 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

Rimuove un listener per un evento dalInAppBrowser.

ref.removeEventListener(eventname, callback);

• Rif: fare riferimento alla InAppBrowser finestra. (InAppBrowser)

• EventName: interrompere l'attesa per l'evento. (String)

  • loadstart: evento viene generato quando il InAppBrowser comincia a caricare un URL.
  • loadstop: evento viene generato quando il InAppBrowser termina il caricamento di un URL.
  • LoadError: evento viene generato quando il InAppBrowser rileva un errore di caricamento di un URL.
  • uscita: evento viene generato quando il InAppBrowser finestra è chiusa.

• richiamata: la funzione da eseguire quando viene generato l'evento. La funzione viene passata un InAppBrowserEvent oggetto.

Piattaforme supportate

• Android
• BlackBerry
• iOS
• Windows Phone 7 e 8

Esempio rapido

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

Esempio 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>

chiudere

Chiude la InAppBrowser finestra.

ref.close();

• Rif: fare riferimento alla InAppBrowser finestra (InAppBrowser)

Piattaforme supportate

• Android
• BlackBerry
• iOS
• Windows Phone 7 e 8

Esempio rapido

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

Esempio 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>

Visualizza

Visualizza una finestra di InAppBrowser che è stato aperto nascosta. Questa chiamata non ha effetto se la InAppBrowser era già visibile.

ref.show();

• ref: riferimento per il InAppBrowser finestra (InAppBrowser)

Piattaforme supportate

• Android
• BlackBerry
• iOS

Esempio rapido

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

Esempio 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

Inserisce il codice JavaScript nella InAppBrowser finestra

ref.executeScript(details, callback);

• Rif: fare riferimento alla InAppBrowser finestra. (InAppBrowser)

• injectDetails: dettagli dello script da eseguire, specificando un file o code chiave. (Oggetto)

  • file: URL dello script da iniettare.
  • codice: testo dello script da iniettare.

• richiamata: la funzione che viene eseguito dopo che il codice JavaScript viene iniettato.

  • Se lo script iniettato è di tipo code , il callback viene eseguita con un singolo parametro, che è il valore restituito del copione, avvolto in un Array . Per gli script multi-linea, questo è il valore restituito dell'ultima istruzione, o l'ultima espressione valutata.

Piattaforme supportate

• Android
• BlackBerry
• iOS

Esempio rapido

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

Esempio 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

Inietta CSS nella InAppBrowser finestra.

ref.insertCSS(details, callback);

• Rif: fare riferimento alla InAppBrowser finestra (InAppBrowser)

• injectDetails: dettagli dello script da eseguire, specificando un file o code chiave. (Oggetto)

  • file: URL del foglio di stile per iniettare.
  • codice: testo del foglio di stile per iniettare.

• richiamata: la funzione che viene eseguito dopo che il CSS viene iniettato.

Piattaforme supportate

• Android
• BlackBerry
• iOS

Esempio rapido

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

Esempio 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

L'oggetto che viene passato alla funzione di richiamata da un addEventListener chiamare su un InAppBrowser oggetto.

Proprietà

• tipo: il eventname, o loadstart , loadstop , loaderror , o exit . (String)

• URL: l'URL che è stato caricato. (String)

• codice: il codice di errore, solo nel caso di loaderror . (Numero)

• messaggio: il messaggio di errore, solo nel caso di loaderror . (String)

---

window.open

Apre un URL in una nuova InAppBrowser istanza, l'istanza corrente del browser o il browser di sistema.

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

• Rif: fare riferimento alla InAppBrowser finestra. (InAppBrowser)

• URL: l'URL da caricare (String). Chiamare encodeURI() su questo, se l'URL contiene caratteri Unicode.

• destinazione: la destinazione in cui caricare l'URL, un parametro facoltativo che il valore predefinito è _self . (String)

  • _self: Si apre in Cordova WebView se l'URL è nella lista bianca, altrimenti si apre nellaInAppBrowser.
  • _blank: Apre ilInAppBrowser.
  • _system: Si apre nel browser web del sistema.

• opzioni: opzioni per il InAppBrowser . Opzionale, inadempiente a: location=yes . (String)

  Il options stringa non deve contenere alcun spazio vuoto, e coppie nome/valore ogni funzionalità devono essere separate da una virgola. Caratteristica nomi sono tra maiuscole e minuscole. Tutte le piattaforme supportano il valore riportato di seguito:

  • posizione: impostata su yes o no per trasformare il InAppBrowser di barra di posizione on o off.

    Android solo

  • closebuttoncaption - impostare una stringa che sarà la didascalia per il pulsante "Done".

  • nascosti - impostato su 'sì' per creare il browser e caricare la pagina, ma non mostrarlo. L'evento di carico sarà il fuoco quando il caricamento è completato. Omettere o impostato su 'no' (predefinito) per avere il browser aperto e caricare normalmente.
  • clearcache - impostato su 'sì' per avere la cache del browser cookie cancellata prima dell'apertura della nuova finestra

  • clearsessioncache - impostare su 'sì' per avere la cache cookie di sessione cancellata prima dell'apertura della nuova finestra

    iOS solo

  • closebuttoncaption - impostare una stringa che sarà la didascalia per il pulsante "Done". Nota che devi localizzare questo valore a te stesso.

  • nascosti - impostato su 'sì' per creare il browser e caricare la pagina, ma non mostrarlo. L'evento di carico sarà il fuoco quando il caricamento è completato. Omettere o impostato su 'no' (predefinito) per avere il browser aperto e caricare normalmente.
  • toolbar - impostato su 'sì' o 'no' per attivare o disattivare la barra degli strumenti per il InAppBrowser (default 'sì')
  • enableViewportScale: impostare su yes o no per impedire la viewport ridimensionamento tramite un tag meta (defaultno).
  • mediaPlaybackRequiresUserAction: impostare su yes o no per impedire HTML5 audio o video da AutoPlay (defaultno).
  • allowInlineMediaPlayback: impostare su yes o no per consentire la riproduzione multimediale inline HTML5, visualizzando all'interno della finestra del browser, piuttosto che un'interfaccia specifica del dispositivo di riproduzione. L'HTML video elemento deve includere anche il webkit-playsinline (default di attributono)
  • keyboardDisplayRequiresUserAction: impostare su yes o no per aprire la tastiera quando elementi form ricevano lo stato attivo tramite di JavaScript focus() chiamata (defaultyes).
  • suppressesIncrementalRendering: impostare su yes o no aspettare fino a quando tutti i nuovi contenuti di vista viene ricevuto prima il rendering (defaultno).
  • presentationstyle: impostare su pagesheet , formsheet o fullscreen per impostare lo stile di presentazione (defaultfullscreen).
  • transitionstyle: impostare su fliphorizontal , crossdissolve o coververtical per impostare lo stile di transizione (defaultcoververtical).

Piattaforme supportate

• Android
• BlackBerry
• iOS
• Windows Phone 7 e 8

Esempio rapido

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

Esempio 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>