InAppBrowser

Le InAppBrowser est un navigateur web qui s'affiche dans l'application lors de l'appelwindow.open.

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

Description

L'objet retourné par un appel àwindow.open.

Depuis la version 3.0, Cordova implémente API au niveau du périphérique comme les plugins. Utiliser de la CLI plugin commande, décrite dans l'Interface de ligne de commande, d'ajouter ou de supprimer cette fonction pour un projet :

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

Ces commandes s'appliquent à toutes les plates-formes ciblées, mais modifier les paramètres de configuration spécifiques à la plateforme décrites ci-dessous :

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

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

iOS (enconfig.xml)

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

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

Certaines plates-formes peuvent prendre en charge cette fonctionnalité sans nécessiter aucune configuration spéciale. Voir plate-forme prise en charge pour une vue d'ensemble.

addEventListener

Ajoute un écouteur pour un événement de laInAppBrowser.

ref.addEventListener(eventname, callback);

Réf: référence à la InAppBrowser fenêtre (InAppBrowser)
EventName: l'événement pour écouter les (String)
- loadstart: événement déclenche quand le InAppBrowser commence à charger une URL.
- loadstop: événement déclenche lorsque la InAppBrowser finit de charger une URL.
- LoadError: événement déclenche lorsque la InAppBrowser rencontre une erreur lors du chargement d'une URL.
- sortie: événement déclenche quand le InAppBrowser fenêtre est fermée.
rappel: la fonction qui s'exécute lorsque l'événement se déclenche. La fonction est passée un InAppBrowserEvent objet comme paramètre.

Plates-formes prises en charge

Android
BlackBerry
iOS
Windows Phone 7 et 8

Petit exemple

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

Exemple complet

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

Supprime un écouteur pour un événement de laInAppBrowser.

ref.removeEventListener(eventname, callback);

Réf: référence à la InAppBrowser fenêtre. (InAppBrowser)
EventName: l'événement pour arrêter l'écoute. (String)
- loadstart: événement déclenche quand le InAppBrowser commence à charger une URL.
- loadstop: événement déclenche lorsque la InAppBrowser finit de charger une URL.
- LoadError: événement déclenche lorsque la InAppBrowser rencontre une erreur lors du chargement d'une URL.
- sortie: événement déclenche quand le InAppBrowser fenêtre est fermée.
rappel: la fonction à exécuter lorsque l'événement se déclenche. La fonction est passée un InAppBrowserEvent objet.

Plates-formes prises en charge

Android
BlackBerry
iOS
Windows Phone 7 et 8

Petit exemple

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

Exemple complet

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

fermer

Ferme la InAppBrowser fenêtre.

ref.close();

Réf: référence à la InAppBrowser fenêtre (InAppBrowser)

Plates-formes prises en charge

Android
BlackBerry
iOS
Windows Phone 7 et 8

Petit exemple

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

Exemple complet

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

Voir l'établissement

Afficher une fenêtre de InAppBrowser qui ouvrit ses portes cachée. Appeler cela n'a aucun effet si la InAppBrowser était déjà visible.

ref.show();

Réf : référence à la fenêtre () InAppBrowserInAppBrowser)

Plates-formes prises en charge

Android
BlackBerry
iOS

Petit exemple

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

Exemple complet

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

Injecte du code JavaScript dans la InAppBrowser fenêtre

ref.executeScript(details, callback);

Réf: référence à la InAppBrowser fenêtre. (InAppBrowser)
injectDetails: Détails du script à exécuter, spécifiant soit un file ou code clés. (Objet)
- fichier: URL du script à injecter.
- code: texte du script à injecter.
rappel: la fonction qui s'exécute après le code JavaScript est injecté.
- Si le script injecté est de type code , le rappel s'exécute avec un seul paramètre, qui est la valeur renvoyée par le script, enveloppé dans une Array . Pour les scripts multilignes, c'est la valeur de retour de la dernière instruction, ou la dernière expression évaluée.

Plates-formes prises en charge

Android
BlackBerry
iOS

Petit exemple

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

Exemple complet

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

Injecte CSS dans le InAppBrowser fenêtre.

ref.insertCSS(details, callback);

Réf: référence à la InAppBrowser fenêtre (InAppBrowser)
injectDetails: Détails du script à exécuter, spécifiant soit un file ou code clés. (Objet)
- fichier: URL de la feuille de style à injecter.
- code: texte de la feuille de style à injecter.
rappel: la fonction qui s'exécute après que le CSS est injecté.

Plates-formes prises en charge

Android
BlackBerry
iOS

Petit exemple

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

Exemple complet

<!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'objet qui est passé à la fonction de rappel d'un addEventListener donne la parole à un InAppBrowser objet.

Propriétés

type: l'eventname, soit loadstart , loadstop , loaderror , ou exit . (String)
URL: l'URL qui a été chargé. (String)
code: le code d'erreur, que dans le cas de loaderror . (Nombre)
message: le message d'erreur que dans le cas de loaderror . (String)

window.open

Ouvre une URL dans une nouvelle InAppBrowser instance, l'instance de navigateur actuelle ou dans l'Explorateur du système.

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

Réf: référence à la InAppBrowser fenêtre. (InAppBrowser)
URL: URL pour charger (String). Appelez encodeURI() sur cette option si l'URL contient des caractères Unicode.
cible: la cible dans lequel charger l'URL, un paramètre optionnel qui par défaut est _self . (String)
- _self: Ouvre le Cordova WebView si l'URL figure dans la liste blanche, dans le cas contraire, il s'ouvre dans leInAppBrowser.
- _blank: S'ouvre dans leInAppBrowser.
- _system: S'ouvre dans le navigateur web du système.
options: Options pour le InAppBrowser . En option, défaillant à: location=yes . (String)

La options chaîne ne doit pas contenir n'importe quel espace vide et paires nom/valeur de chaque fonctionnalité doivent être séparés par une virgule. Les noms de fonction respectent la casse. Toutes les plates-formes prennent en charge la valeur ci-dessous :
- localisation: la valeur yes ou no pour mettre le InAppBrowser de barre d'adresses ou désactiver.
  
  Android seulement
- closebuttoncaption - définir une chaîne qui sera la légende pour le bouton "Terminé".
- cachée -' Yes ' pour créer le navigateur et charger la page, mais ne pas le montrer. L'événement load se déclenche lorsque le chargement est terminé. Omettre ou la valeur « non » (par défaut) pour que le navigateur ouvrir et charger normalement.
- clearcache - ' Yes ' pour avoir le cache du navigateur cookie effacé avant l'ouverture de la nouvelle fenêtre
- clearsessioncache - ' Yes ' pour avoir le cache de cookie de session autorisé avant l'ouverture de la nouvelle fenêtre
  
  iOS seulement
- closebuttoncaption - définir une chaîne qui sera la légende pour le bouton "Terminé". Notez que vous devrez localiser cette valeur vous-même.
- cachée -' Yes ' pour créer le navigateur et charger la page, mais ne pas le montrer. L'événement load se déclenche lorsque le chargement est terminé. Omettre ou la valeur « non » (par défaut) pour que le navigateur ouvrir et charger normalement.
- barre d'outils - la valeur "Oui" ou "non" pour activer ou désactiver la la barre d'outils pour la InAppBrowser (par défaut sur 'yes')
- enableViewportScale: la valeur yes ou no pour empêcher la fenêtre de mise à l'échelle par une balise meta (par défaut,no).
- mediaPlaybackRequiresUserAction: la valeur yes ou no pour empêcher le HTML5 audio ou vidéo de la lecture automatique (par défaut,no).
- allowInlineMediaPlayback: la valeur yes ou no pour permettre la lecture du média inline HTML5, affichage dans la fenêtre du navigateur plutôt que d'une interface de lecture spécifique au périphérique. L'HTML video élément doit également inclure la webkit-playsinline attribut (par défaut,no)
- keyboardDisplayRequiresUserAction: la valeur yes ou no pour ouvrir le clavier lorsque les éléments reçoivent le focus par l'intermédiaire de JavaScript focus() appel (par défaut,yes).
- suppressesIncrementalRendering: la valeur yes ou no d'attendre que toutes les nouveautés de vue sont reçue avant d'être restitué (par défaut,no).
- presentationstyle: la valeur pagesheet , formsheet ou fullscreen pour définir le style de présentation (par défaut,fullscreen).
- transitionstyle: la valeur fliphorizontal , crossdissolve ou coververtical pour définir le style de transition (par défaut,coververtical).

Plates-formes prises en charge

Android
BlackBerry
iOS
Windows Phone 7 et 8

Petit exemple

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

Exemple complet

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

Documentation Apache Cordova

InAppBrowser

Guides

Références de l'API

InAppBrowser

Description

Méthodes

Accéder à la fonctionnalité

addEventListener

Plates-formes prises en charge

Petit exemple

Exemple complet

removeEventListener

Plates-formes prises en charge

Petit exemple

Exemple complet

fermer

Plates-formes prises en charge

Petit exemple

Exemple complet

Voir l'établissement

Plates-formes prises en charge

Petit exemple

Exemple complet

executeScript

Plates-formes prises en charge

Petit exemple

Exemple complet

insertCSS

Plates-formes prises en charge

Petit exemple

Exemple complet

InAppBrowserEvent

Propriétés

window.open

Android seulement

iOS seulement

Plates-formes prises en charge

Petit exemple

Exemple complet