Cordova - InAppBrowser

Ce plugin est utilisé pour ouvrir le navigateur Web dans l'application Cordova.

Étape 1 - Installation du plug-in

Nous devons installer ce plugin dans command prompt fenêtre avant que nous puissions l'utiliser.

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

Étape 2 - Bouton Ajouter

Nous ajouterons un bouton qui sera utilisé pour l'ouverture inAppBrowser fenêtre dans index.html.

Étape 3 - Ajouter un écouteur d'événements

Ajoutons maintenant un écouteur d'événements pour notre bouton dans onDeviceReady fonction dans index.js.

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

Étape 4 - Créer une fonction

Dans cette étape, nous créons une fonction qui ouvrira le navigateur dans notre application. Nous l'attribuons auref variable que nous pouvons utiliser plus tard pour ajouter des écouteurs d'événements.

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 nous pressons BROWSER bouton, nous verrons la sortie suivante à l'écran.

La console écoutera également les événements. loadstart l'événement se déclenchera lorsque l'URL commencera à se charger et loadstopse déclenche lorsque l'URL est chargée. Nous pouvons le voir dans la console.

Une fois que nous fermons le navigateur, exit L'événement se déclenchera.

Il existe d'autres options possibles pour la fenêtre InAppBrowser. Nous l'expliquerons dans le tableau ci-dessous.

S. Non option et détails
1

location

Utilisé pour activer ou désactiver la barre d'adresse du navigateur. Les valeurs sontyes ou no.
2

hidden

Utilisé pour masquer ou afficher dansAppBrowser. Les valeurs sontyes ou no.
3

clearCache

Utilisé pour vider le cache des cookies du navigateur. Les valeurs sontyes ou no.
4

clearsessioncache

Utilisé pour vider le cache des cookies de session. Les valeurs sontyes ou no.
5

zoom

Utilisé pour masquer ou afficher les commandes de zoom du navigateur Android. Les valeurs sontyes ou no.
6

hardwareback

yes pour utiliser le bouton de retour matériel pour revenir en arrière dans l'historique du navigateur. no pour fermer le navigateur une fois que le bouton de retour est cliqué.

On peut utiliser ref(référence) variable pour certaines autres fonctionnalités. Nous allons vous en montrer quelques exemples rapides. Pour supprimer les écouteurs d'événements, nous pouvons utiliser -

ref.removeEventListener(eventname, callback);

Pour fermer InAppBrowser, nous pouvons utiliser -

ref.close();

Si nous avons ouvert une fenêtre cachée, nous pouvons la montrer -

ref.show();

Même le code JavaScript peut être injecté dans InAppBrowser -

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

Le même concept peut être utilisé pour injecter du CSS -

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