cordova-plugin-inappbrowser
Ce module fournit une vue de navigateur web qui s'affiche lorsque vous appelez cordova.InAppBrowser.open().
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
Le cordova.InAppBrowser.open() fonction est définie pour être un remplacement rapide de la fonction window.open(). Les appels existants window.open() peuvent utiliser la fenêtre de InAppBrowser, en remplaçant window.open :
window.open = cordova.InAppBrowser.open;
La fenêtre de InAppBrowser se comporte comme un navigateur web standard et ne peut pas accéder aux APIs Cordova. Pour cette raison, le InAppBrowser est recommandé si vous devez charger le contenu de tiers (non approuvé), au lieu de chargement que dans le principaux webview Cordova. Le InAppBrowser n'est pas soumis à la liste blanche, ni s'ouvre les liens dans le navigateur de système.
Le InAppBrowser fournit par défaut ses propres contrôles de GUI pour l'utilisateur (arrière, avant, fait).
Pour vers l'arrière la compatibilité, ce plugin crochets également window.open. Cependant, le plugin installé crochet de window.open peut avoir des effets secondaires involontaires (surtout si ce plugin est inclus uniquement comme une dépendance d'un autre plugin). Le crochet de window.open sera supprimé dans une future version majeure. Jusqu'à ce que le crochet est supprimé de la plugin, apps peuvent restaurer manuellement le comportement par défaut :
delete window.open // Reverts the call back to it's prototype's default
Bien que window.open est dans la portée globale, InAppBrowser n'est pas disponible jusqu'à ce qu'après l'événement deviceready.
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log("window.open works well");
}
Installation
cordova plugin add cordova-plugin-inappbrowser
Si vous souhaitez que toutes les charges de la page dans votre application de passer par le InAppBrowser, vous pouvez simplement accrocher window.open pendant l'initialisation. Par exemple :
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
window.open = cordova.InAppBrowser.open;
}
cordova.InAppBrowser.open
Ouvre une URL dans une nouvelle instance de InAppBrowser, l'instance de navigateur actuelle ou dans l'Explorateur du système.
var ref = cordova.InAppBrowser.open(url, target, options);
-
ref : référence à la fenêtre
InAppBrowser. (InAppBrowser) -
url : l'URL à charger (String). À encoder au préalable via
encodeURI()si celle-ci contient des caractères Unicode. -
target : la cible du chargement de l'URL, ce paramètre est optionnel, sa valeur par défaut est
_self. (String)_self: dirige le chargement vers la WebView Cordova si l'URL figure dans la liste blanche, sinon dans une fenêtreInAppBrowser._blank: dirige le chargement vers une fenêtreInAppBrowser._system: dirige le chargement vers le navigateur Web du système.
-
options : permet de personnaliser la fenêtre
InAppBrowser. Paramètre facultatif dont la valeur par défaut estlocation=yes. (String)La chaîne
optionsne doit contenir aucun caractère vide, chaque paire nom/valeur représentant une fonctionnalité doit être séparée de la précédente par une virgule. Les noms de fonctionnalités sont sensibles à la casse. Toutes les plates-formes prennent en charge la valeur ci-dessous :- location : régler à
yesounoafin d'afficher ou masquer la barre d'adresse de la fenêtreInAppBrowser.
Android uniquement :
- caché: la valeur
yespour créer le navigateur et charger la page, mais ne pas le montrer. L'événement loadstop est déclenché lorsque le chargement est terminé. Omettre ou la valeurno(par défaut) pour que le navigateur ouvrir et charger normalement. - ClearCache: la valeur
yespour que le navigateur du cache de cookie effacé, avant l'ouverture de la nouvelle fenêtre - clearsessioncache: la valeur
yespour avoir le cache de cookie de session autorisé avant l'ouverture de la nouvelle fenêtre - zoom: la valeur
yespour afficher les commandes de zoom du navigateur Android, affecteznode les cacher. Valeur par défaut estyes. - hardwareback: utilisez le bouton de retour de matériel pour naviguer vers l'arrière à travers l'histoire de
InAppBrowserde la valeurOui. S'il n'y a aucune page précédente,InAppBrowserfermera. La valeur par défaut estyes, alors vous devez le définir ànosi vous souhaitez que le bouton back de simplement fermer la InAppBrowser.
iOS uniquement :
- closebuttoncaption: affectez une chaîne à utiliser comme la fait légende du bouton. Notez que vous devrez localiser cette valeur vous-même.
- disallowoverscroll: la valeur
yesouno(valeur par défaut estno). Active/désactive la propriété UIWebViewBounce. - caché: la valeur
yespour créer le navigateur et charger la page, mais ne pas le montrer. L'événement loadstop est déclenché lorsque le chargement est terminé. Omettre ou la valeurno(par défaut) pour que le navigateur ouvrir et charger normalement. - ClearCache: la valeur
yespour que le navigateur du cache de cookie effacé, avant l'ouverture de la nouvelle fenêtre - clearsessioncache: la valeur
yespour avoir le cache de cookie de session autorisé avant l'ouverture de la nouvelle fenêtre - barre d'outils: la valeur
yesounopour activer la barre d'outils ou désactiver pour le InAppBrowser (par défaut,yes) - enableViewportScale: la valeur
yesounopour empêcher la fenêtre de mise à l'échelle par une balise meta (par défaut,no). - mediaPlaybackRequiresUserAction: la valeur
yesounopour empêcher le HTML5 audio ou vidéo de la lecture automatique (par défaut,no). - allowInlineMediaPlayback: la valeur
yesounopour permettre la lecture du média en ligne HTML5, affichage dans la fenêtre du navigateur plutôt que d'une interface de lecture spécifique au périphérique. L'HTMLvideoélément doit également inclure lawebkit-playsinlineattribut (par défaut,no) - keyboardDisplayRequiresUserAction: la valeur
yesounopour ouvrir le clavier lorsque les éléments reçoivent le focus par l'intermédiaire de JavaScriptfocus()appel (par défaut,yes). - suppressesIncrementalRendering: la valeur
yesounod'attendre que toutes les nouveautés de vue sont reçue avant d'être restitué (par défaut,no). - presentationstyle: la valeur
pagesheet,formsheetoufullscreenpour définir le style de présentation (par défaut,fullscreen). - transitionstyle: la valeur
fliphorizontal,crossdissolveoucoververticalpour définir le style de transition (par défaut,coververtical). - toolbarposition: la valeur
topoubottom(valeur par défaut estbottom). Causes de la barre d'outils être en haut ou en bas de la fenêtre.
Windows uniquement :
- caché: la valeur
yespour créer le navigateur et charger la page, mais ne pas le montrer. L'événement loadstop est déclenché lorsque le chargement est terminé. Omettre ou la valeurno(par défaut) pour que le navigateur ouvrir et charger normalement. - fullscreen: défini à
yespour créer le contrôle de navigateur sans bordure autour d'elle. Veuillez noter que si location=no est également spécifiée, il n'y n'aura aucun contrôle a présenté à l'utilisateur de fermer la fenêtre du CCI.
- location : régler à
Plates-formes supportées
- Amazon Fire OS
- Android
- BlackBerry 10
- Firefox OS
- iOS
- Windows 8 et 8.1
- Windows Phone 7 et 8
- Navigateur
Exemple
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
var ref2 = cordova.InAppBrowser.open(encodeURI('http://ja.m.wikipedia.org/wiki/ハングル'), '_blank', 'location=yes');
Firefox OS Quirks
Comme plugin n'est pas appliquer n'importe quelle conception il est nécessaire d'ajouter quelques règles CSS si ouvert avec target= _blank. Les règles pourraient ressembler à ces
.inAppBrowserWrap {
background-color: rgba(0,0,0,0.75);
color: rgba(235,235,235,1.0);
}
.inAppBrowserWrap menu {
overflow: auto;
list-style-type: none;
padding-left: 0;
}
.inAppBrowserWrap menu li {
font-size: 25px;
height: 25px;
float: left;
margin: 0 10px;
padding: 3px 10px;
text-decoration: none;
color: #ccc;
display: block;
background: rgba(30,30,30,0.50);
}
.inAppBrowserWrap menu li.disabled {
color: #777;
}
Bizarreries de Windows
Semblable à un comportement visuel fenêtre Firefox OS CCI peut être substituée par l'intermédiaire de inAppBrowserWrap/inAppBrowserWrapFullscreen des classes CSS
Bizarreries navigateur
-
Plugin est implémentée via iframe,
-
Historique de navigation (boutons
backetforwarddans LocationBar) n'est pas implémentée.
InAppBrowser
L'objet retourné par un appel à cordova.InAppBrowser.open.
Méthodes
- addEventListener
- removeEventListener
- close
- show
- executeScript
- insertCSS
addEventListener
Ajoute un écouteur pour un évènement de la fenêtre
InAppBrowser.
ref.addEventListener(eventname, callback);
-
ref : référence à la fenêtre
InAppBrowser. (InAppBrowser) -
eventname : l'évènement à écouter (String)
- loadstart : évènement déclenché lorsque le chargement d'une URL débute dans la fenêtre
InAppBrowser. - loadstop : évènement déclenché lorsque la fenêtre
InAppBrowserfinit de charger une URL. - loaderror : évènement déclenché si la fenêtre
InAppBrowserrencontre une erreur lors du chargement d'une URL. - exit : évènement déclenché lorsque la fenêtre
InAppBrowserest fermée.
- loadstart : évènement déclenché lorsque le chargement d'une URL débute dans la fenêtre
-
callback : la fonction à exécuter lorsque l'évènement se déclenche. Un objet
InAppBrowserEventlui est transmis comme paramètre.
Propriétés de InAppBrowserEvent
-
type : le nom de l'évènement, soit
loadstart,loadstop,loaderrorouexit. (String) -
url : l'URL ayant été chargée. (String)
-
code : le code d'erreur, seulement pour
loaderror. (Number) -
message : un message d'erreur, seulement pour
loaderror. (String)
Plates-formes supportées
- Amazon Fire OS
- Android
- iOS
- Windows 8 et 8.1
- Windows Phone 7 et 8
- Navigateur
Bizarreries navigateur
les événements loadstart et loaderror ne sont pas déclenchés.
Exemple court
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
ref.addEventListener('loadstart', function(event) { alert(event.url); });
removeEventListener
Supprime un écouteur pour un évènement de la fenêtre
InAppBrowser.
ref.removeEventListener(eventname, callback);
-
ref : référence à la fenêtre
InAppBrowser. (InAppBrowser) -
eventname : l'évènement pour lequel arrêter l'écoute. (String)
- loadstart : évènement déclenché lorsque le chargement d'une URL débute dans la fenêtre
InAppBrowser. - loadstop : évènement déclenché lorsque la fenêtre
InAppBrowserfinit de charger une URL. - loaderror : évènement déclenché si la fenêtre
InAppBrowserrencontre une erreur lors du chargement d'une URL. - exit : évènement déclenché lorsque la fenêtre
InAppBrowserest fermée.
- loadstart : évènement déclenché lorsque le chargement d'une URL débute dans la fenêtre
-
callback : la fonction à exécuter lorsque l'évènement se déclenche. Un objet
InAppBrowserEventlui est transmis comme paramètre.
Plates-formes supportées
- Amazon Fire OS
- Android
- iOS
- Windows 8 et 8.1
- Windows Phone 7 et 8
- Navigateur
Exemple court
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
var myCallback = function(event) { alert(event.url); }
ref.addEventListener('loadstart', myCallback);
ref.removeEventListener('loadstart', myCallback);
close
Ferme la fenêtre
InAppBrowser.
ref.close();
- ref : référence à la fenêtre
InAppBrowser. (InAppBrowser)
Plates-formes supportées
- Amazon Fire OS
- Android
- Firefox OS
- iOS
- Windows 8 et 8.1
- Windows Phone 7 et 8
- Navigateur
Exemple court
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
ref.close();
show
Affiche une fenêtre InAppBrowser qui a été ouverte cachée. Appeler cette méthode n'a aucun effet si la fenêtre en question est déjà visible.
ref.show();
- Réf: référence à la fenêtre () InAppBrowser
InAppBrowser)
Plates-formes supportées
- Amazon Fire OS
- Android
- iOS
- Windows 8 et 8.1
- Navigateur
Exemple court
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'hidden=yes');
// some time later...
ref.show();
executeScript
Injecte du code JavaScript dans la fenêtre
InAppBrowser
ref.executeScript(details, callback);
-
ref : référence à la fenêtre
InAppBrowser. (InAppBrowser) -
injectDetails : détails du script à exécuter, requérant une propriété
fileoucode. (Object)- file : URL du script à injecter.
- code : texte du script à injecter.
-
callback : une fonction exécutée après l'injection du code JavaScript.
- Si le script injecté est de type
code, un seul paramètre est transmis à la fonction callback, correspondant à la valeur de retour du script enveloppée dans unArray. Pour les scripts multilignes, il s'agit de la valeur renvoyée par la dernière instruction ou la dernière expression évaluée.
- Si le script injecté est de type
Plates-formes supportées
- Amazon Fire OS
- Android
- iOS
- Windows 8 et 8.1
- Navigateur
Exemple court
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
ref.addEventListener('loadstop', function() {
ref.executeScript({file: "myscript.js"});
});
Bizarreries navigateur
- clef de code uniquement est pris en charge.
Bizarreries de Windows
En raison de la documentation MSDN le script appelé peut retourner uniquement les valeurs de chaîne, sinon le paramètre, passé au rappel sera [null].
insertCSS
Injecte des règles CSS dans la fenêtre
InAppBrowser.
ref.insertCSS(details, callback);
-
ref : référence à la fenêtre
InAppBrowser. (InAppBrowser) -
injectDetails : détails du script à exécuter, requérant une propriété
fileoucode. (Object)- file : URL de la feuille de style à injecter.
- code : contenu de la feuille de style à injecter.
-
callback : une fonction exécutée après l'injection du fichier CSS.
Plates-formes supportées
- Amazon Fire OS
- Android
- iOS
- Windows
Exemple court
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
ref.addEventListener('loadstop', function() {
ref.insertCSS({file: "mystyles.css"});
});