Cordova - InAppBrowser

Questo plugin viene utilizzato per aprire il browser web all'interno dell'app Cordova.

Passaggio 1: installazione del plug-in

Dobbiamo installare questo plugin in command prompt finestra prima di poterlo utilizzare.

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

Passaggio 2: pulsante Aggiungi

Aggiungeremo un pulsante che verrà utilizzato per l'apertura inAppBrowser finestra in index.html.

Passaggio 3 - Aggiungi listener di eventi

Ora aggiungiamo un listener di eventi per il nostro pulsante in onDeviceReady funzione in index.js.

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

Passaggio 4: creare una funzione

In questo passaggio stiamo creando una funzione che aprirà il browser all'interno della nostra app. Lo stiamo assegnando aref variabile che possiamo utilizzare in seguito per aggiungere listener di eventi.

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...')
   }
}

Se premiamo BROWSER pulsante, vedremo il seguente output sullo schermo.

La console ascolterà anche gli eventi. loadstart l'evento si attiverà all'avvio del caricamento dell'URL e loadstopsi attiverà quando l'URL viene caricato. Possiamo vederlo in console.

Una volta chiuso il browser, exit l'evento si attiverà.

Ci sono altre possibili opzioni per la finestra InAppBrowser. Lo spiegheremo nella tabella sottostante.

S.No opzione e dettagli
1

location

Utilizzato per attivare o disattivare la barra degli indirizzi del browser. I valori sonoyes o no.
2

hidden

Utilizzato per nascondere o mostrare inAppBrowser. I valori sonoyes o no.
3

clearCache

Utilizzato per cancellare la cache dei cookie del browser. I valori sonoyes o no.
4

clearsessioncache

Utilizzato per cancellare la cache dei cookie di sessione. I valori sonoyes o no.
5

zoom

Utilizzato per nascondere o mostrare i controlli di zoom del browser Android. I valori sonoyes o no.
6

hardwareback

yes per utilizzare il pulsante hardware Indietro per tornare indietro nella cronologia del browser. no per chiudere il browser dopo aver fatto clic sul pulsante Indietro.

Possiamo usare ref(riferimento) variabile per alcune altre funzionalità. Ti mostreremo solo alcuni rapidi esempi. Per rimuovere i listener di eventi possiamo usare -

ref.removeEventListener(eventname, callback);

Per chiudere InAppBrowser possiamo usare -

ref.close();

Se abbiamo aperto la finestra nascosta, possiamo mostrarla -

ref.show();

Anche il codice JavaScript può essere iniettato in InAppBrowser -

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

Lo stesso concetto può essere utilizzato per iniettare CSS -

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