16 KiB
cordova-plugin-inappbrowser
Questo plugin fornisce una vista di browser web che viene visualizzato quando si chiama di cordova.InAppBrowser.open()
.
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
Il cordova.InAppBrowser.open()
funzione è definita per essere un rimpiazzo per la funzione window.open
. Esistenti chiamate Window
possono utilizzare la finestra di InAppBrowser, sostituendo window.open():
window.open = cordova.InAppBrowser.open;
La finestra di InAppBrowser si comporta come un browser web standard e non può accedere a Cordova APIs. Per questo motivo, è consigliabile la InAppBrowser se è necessario caricare il contenuto (non attendibile) di terze parti, invece di caricamento che in webview Cordova principale. Il InAppBrowser non è soggetto alla whitelist, né sta aprendo il link nel browser di sistema.
La InAppBrowser fornisce di default propri controlli GUI per l'utente (indietro, avanti, fatto).
Per indietro la compatibilità, questo plugin ganci anche window.open
. Tuttavia, il plugin installato gancio di window.open
può avere effetti collaterali indesiderati (soprattutto se questo plugin è incluso solo come dipendenza di un altro plugin). Il gancio di window. open
verrà rimosso in una futura release principale. Fino a quando il gancio è rimosso dal plugin, apps può ripristinare manualmente il comportamento predefinito:
delete window.open // Reverts the call back to it's prototype's default
Sebbene window.open
sia in ambito globale, InAppBrowser non è disponibile fino a dopo l'evento deviceready
.
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log("window.open works well");
}
Installazione
cordova plugin add cordova-plugin-inappbrowser
Se si desidera che tutti i carichi di pagina nell'app di passare attraverso il InAppBrowser, si può semplicemente collegare window.open
durante l'inizializzazione. Per esempio:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
window.open = cordova.InAppBrowser.open;
}
cordova.InAppBrowser.open
Apre un URL in una nuova istanza di InAppBrowser
, l'istanza corrente del browser o il browser di sistema.
var ref = cordova.InAppBrowser.open(url, target, options);
-
ref: fare riferimento alla
InAppBrowser
finestra. (InAppBrowser) -
url: l'URL da caricare (String). Chiamare
encodeURI()
su questo, se l'URL contiene caratteri Unicode. -
target: 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.
-
options: 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
ono
per trasformare ilInAppBrowser
di barra di posizione on o off.
Solo su Android:
- nascosti: impostare su
yes
per creare il browser e caricare la pagina, ma non mostrarlo. L'evento loadstop viene generato quando il caricamento è completato. Omettere o impostata suno
(impostazione predefinita) per avere il browser aperto e caricare normalmente. - ClearCache: impostare su
yes
per avere il browser cache cookie ha lasciata prima dell'apertura della nuova finestra - clearsessioncache: impostare su
yes
per avere la cache cookie di sessione cancellata prima dell'apertura della nuova finestra - zoom: impostare su
yes
per mostrare i controlli di zoom del browser Android, impostata suno
per nasconderli. Valore predefinito èyes
. - hardwareback: impostare
yes
per utilizzare il pulsante Indietro hardware per spostarsi all'indietro tra ilInAppBrowser
di storia. Se esiste una pagina precedente, si chiuderà ilInAppBrowser
. Il valore predefinito èyes
, quindi è necessario impostare ano
, se si desidera che il pulsante indietro per chiudere semplicemente il InAppBrowser.
solo iOS:
- closebuttoncaption: impostare una stringa da utilizzare come didascalia del pulsante fatto . Si noti che è necessario localizzare questo valore a te stesso.
- disallowoverscroll: impostare su
yes
ono
(default èno
). Attiva/disattiva la proprietà UIWebViewBounce. - nascosti: impostare su
yes
per creare il browser e caricare la pagina, ma non mostrarlo. L'evento loadstop viene generato quando il caricamento è completato. Omettere o impostata suno
(impostazione predefinita) per avere il browser aperto e caricare normalmente. - ClearCache: impostare su
yes
per avere il browser cache cookie ha lasciata prima dell'apertura della nuova finestra - clearsessioncache: impostare su
yes
per avere la cache cookie di sessione cancellata prima dell'apertura della nuova finestra - Toolbar: impostare su
yes
ono
per attivare la barra degli strumenti o disattivare per il InAppBrowser (defaultyes
) - enableViewportScale: impostare su
yes
ono
per impedire la viewport ridimensionamento tramite un tag meta (defaultno
). - mediaPlaybackRequiresUserAction: impostare su
yes
ono
per impedire HTML5 audio o video da AutoPlay (defaultno
). - allowInlineMediaPlayback: impostare su
yes
ono
per consentire la riproduzione dei supporti HTML5 in linea, visualizzare all'interno della finestra del browser, piuttosto che un'interfaccia specifica del dispositivo di riproduzione. L'HTMLvideo
elemento deve includere anche ilwebkit-playsinline
(default di attributono
) - keyboardDisplayRequiresUserAction: impostare su
yes
ono
per aprire la tastiera quando elementi form ricevano lo stato attivo tramite di JavaScriptfocus()
chiamata (defaultyes
). - suppressesIncrementalRendering: impostare su
yes
ono
aspettare fino a quando tutti i nuovi contenuti di vista viene ricevuto prima il rendering (defaultno
). - presentationstyle: impostare su
pagesheet
,formsheet
ofullscreen
per impostare lo stile di presentazione (defaultfullscreen
). - transitionstyle: impostare su
fliphorizontal
,crossdissolve
ocoververtical
per impostare lo stile di transizione (defaultcoververtical
). - toolbarposition: impostare su
top
obottom
(default èbottom
). Provoca la barra degli strumenti sia nella parte superiore o inferiore della finestra.
Solo per Windows:
- nascosti: impostare su
yes
per creare il browser e caricare la pagina, ma non mostrarlo. L'evento loadstop viene generato quando il caricamento è completato. Omettere o impostata suno
(impostazione predefinita) per avere il browser aperto e caricare normalmente. - fullscreen: impostata su
yes
per creare il controllo browser senza un bordo attorno ad esso. Siete pregati di notare che se location=no viene specificato, non ci sarà nessun controllo presentato all'utente per chiudere la finestra IAB.
- posizione: impostata su
Piattaforme supportate
- Amazon fuoco OS
- Android
- BlackBerry 10
- Firefox OS
- iOS
- Windows 8 e 8.1
- Windows Phone 7 e 8
- Browser
Esempio
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 stranezze
Come plugin non imporre alcun disegno c'è bisogno di aggiungere alcune regole CSS se aperto con target='_blank'
. Le regole potrebbero apparire come questi
.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;
}
Stranezze di Windows
Simile al comportamento visivo finestra di Firefox OS IAB può essere sottoposto a override tramite inAppBrowserWrap
/ classi CSSinAppBrowserWrapFullscreen
Stranezze browser
-
Plugin viene implementato tramite iframe,
-
Cronologia di navigazione (pulsanti
indietro
eAvanti
in LocationBar) non è implementato.
InAppBrowser
L'oggetto restituito da una chiamata a di cordova.InAppBrowser.open
.
Metodi
- addEventListener
- removeEventListener
- close
- show
- executeScript
- insertCSS
addEventListener
Aggiunge un listener per un evento dal
InAppBrowser
.
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.
- loadstart: evento viene generato quando il
-
richiamata: la funzione che viene eseguito quando viene generato l'evento. La funzione viene passata un
InAppBrowserEvent
oggetto come parametro.
Proprietà InAppBrowserEvent
-
tipo: il eventname, o
loadstart
,loadstop
,loaderror
, oexit
. (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)
Piattaforme supportate
- Amazon fuoco OS
- Android
- iOS
- Windows 8 e 8.1
- Windows Phone 7 e 8
- Browser
Stranezze browser
eventi onloadstart
e loaderror
non sono stati licenziati.
Esempio rapido
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
ref.addEventListener('loadstart', function(event) { alert(event.url); });
removeEventListener
Rimuove un listener per un evento dal
InAppBrowser
.
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.
- loadstart: evento viene generato quando il
-
richiamata: la funzione da eseguire quando viene generato l'evento. La funzione viene passata un
InAppBrowserEvent
oggetto.
Piattaforme supportate
- Amazon fuoco OS
- Android
- iOS
- Windows 8 e 8.1
- Windows Phone 7 e 8
- Browser
Esempio rapido
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
Chiude la
InAppBrowser
finestra.
ref.close();
- Rif: fare riferimento alla
InAppBrowser
finestra (InAppBrowser)
Piattaforme supportate
- Amazon fuoco OS
- Android
- Firefox OS
- iOS
- Windows 8 e 8.1
- Windows Phone 7 e 8
- Browser
Esempio rapido
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
ref.close();
show
Visualizza una finestra di InAppBrowser che è stato aperto nascosta. Questa chiamata non ha effetto se la InAppBrowser era già visibile.
ref.show();
- Rif: riferimento per il InAppBrowser finestra (
InAppBrowser
)
Piattaforme supportate
- Amazon fuoco OS
- Android
- iOS
- Windows 8 e 8.1
- Browser
Esempio rapido
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'hidden=yes');
// some time later...
ref.show();
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
ocode
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 unArray
. Per gli script multi-linea, questo è il valore restituito dell'ultima istruzione, o l'ultima espressione valutata.
- Se lo script iniettato è di tipo
Piattaforme supportate
- Amazon fuoco OS
- Android
- iOS
- Windows 8 e 8.1
- Browser
Esempio rapido
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
ref.addEventListener('loadstop', function() {
ref.executeScript({file: "myscript.js"});
});
Stranezze browser
- è supportato solo il code chiave.
Stranezze di Windows
A causa di documenti MSDN lo script richiamato può restituire solo i valori di stringa, altrimenti il parametro, passato al callback sarà [null]
.
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
ocode
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
- Amazon fuoco OS
- Android
- iOS
- Windows
Esempio rapido
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
ref.addEventListener('loadstop', function() {
ref.insertCSS({file: "mystyles.css"});
});