InAppBrowser

Die InAppBrowser ist ein Web-Browser, die in der app beim Aufruf zeigtwindow.open.

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

Beschreibung

Aus einem Aufruf zurückgegebenen Objektswindow.open.

Methoden

• addEventListener
• removeEventListener
• Schließen
• Karte
• executeScript
• insertCSS

Zugriff auf die Funktion

Ab Version 3.0 implementiert Cordova Geräteebene APIs als Plugins. Verwenden Sie der CLI plugin Befehl, beschrieben in der Command-Line Interface, hinzufügen oder Entfernen dieses Feature für ein Projekt:

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

Diese Befehle gelten für alle Zielplattformen, aber die unten beschriebenen Plattform-spezifische Konfigurationseinstellungen ändern:

• Android (inapp/res/xml/config.xml)

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

• iOS (inconfig.xml)

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

• Windows Phone 7 und 8 (inconfig.xml)

  <feature name="InAppBrowser" />
  

Einige Plattformen können dieses Feature unterstützen, ohne dass eine besondere Konfiguration. Eine Übersicht finden Sie unter Plattform-Support.

addEventListener

Fügt einen Listener für eine Veranstaltung aus derInAppBrowser.

ref.addEventListener(eventname, callback);

• Ref: Bezugnahme auf die InAppBrowser Fenster (InAppBrowser)

• EventName: das Ereignis zu warten (String)

  • Loadstart: Ereignis wird ausgelöst, wenn die InAppBrowser beginnt, eine URL zu laden.
  • Loadstop: Ereignis wird ausgelöst, wenn der InAppBrowser beendet ist, eine URL laden.
  • LoadError: Ereignis wird ausgelöst, wenn der InAppBrowser ein Fehler auftritt, wenn Sie eine URL zu laden.
  • Ausfahrt: Ereignis wird ausgelöst, wenn das InAppBrowser -Fenster wird geschlossen.

• Rückruf: die Funktion, die ausgeführt wird, wenn das Ereignis ausgelöst wird. Die Funktion übergeben wird ein InAppBrowserEvent -Objekt als Parameter.

Unterstützte Plattformen

• Android
• BlackBerry
• iOS
• Windows Phone 7 und 8

Kleines Beispiel

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

Vollständiges Beispiel

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

Entfernt einen Listener für eine Veranstaltung aus derInAppBrowser.

ref.removeEventListener(eventname, callback);

• Ref: Bezugnahme auf die InAppBrowser Fenster. (InAppBrowser)

• EventName: das Ereignis zu warten. (String)

  • Loadstart: Ereignis wird ausgelöst, wenn die InAppBrowser beginnt, eine URL zu laden.
  • Loadstop: Ereignis wird ausgelöst, wenn der InAppBrowser beendet ist, eine URL laden.
  • LoadError: Ereignis wird ausgelöst, wenn die InAppBrowser trifft einen Fehler beim Laden einer URLs.
  • Ausfahrt: Ereignis wird ausgelöst, wenn das InAppBrowser -Fenster wird geschlossen.

• Rückruf: die Funktion ausgeführt, wenn das Ereignis ausgelöst wird. Die Funktion übergeben wird ein InAppBrowserEvent Objekt.

Unterstützte Plattformen

• Android
• BlackBerry
• iOS
• Windows Phone 7 und 8

Kleines Beispiel

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

Vollständiges Beispiel

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

Schließen

Schließt die InAppBrowser Fenster.

ref.close();

• Ref: Bezugnahme auf die InAppBrowser Fenster (InAppBrowser)

Unterstützte Plattformen

• Android
• BlackBerry
• iOS
• Windows Phone 7 und 8

Kleines Beispiel

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

Vollständiges Beispiel

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

Karte

Zeigt ein InAppBrowser-Fenster, das geöffnet wurde, versteckt. Aufrufen, dies hat keine Auswirkungen, wenn die InAppBrowser schon sichtbar war.

ref.show();

• Ref: Verweis auf die (InAppBrowser) FensterInAppBrowser)

Unterstützte Plattformen

• Android
• BlackBerry
• iOS

Kleines Beispiel

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

Vollständiges Beispiel

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

Fügt JavaScript-Code in das InAppBrowser Fenster

ref.executeScript(details, callback);

• Ref: Bezugnahme auf die InAppBrowser Fenster. (InAppBrowser)

• InjectDetails: Informationen über das Skript ausgeführt, angeben, entweder ein file oder code Schlüssel. (Objekt)

  • Datei: URL des Skripts zu injizieren.
  • Code: Text des Skripts zu injizieren.

• Rückruf: die Funktion, die ausgeführt wird, nachdem der JavaScript-Code injiziert wird.

  • Wenn das eingefügte Skript vom Typ ist code , der Rückruf führt mit einen einzelnen Parameter, der der Rückgabewert des Skripts ist, umwickelt ein Array . Bei Multi-Line-Skripten ist der Rückgabewert von der letzten Anweisung oder den letzten Ausdruck ausgewertet.

Unterstützte Plattformen

• Android
• BlackBerry
• iOS

Kleines Beispiel

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

Vollständiges Beispiel

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

Injiziert CSS in der InAppBrowser Fenster.

ref.insertCSS(details, callback);

• Ref: Bezugnahme auf die InAppBrowser Fenster (InAppBrowser)

• InjectDetails: Informationen über das Skript ausgeführt, angeben, entweder ein file oder code Schlüssel. (Objekt)

  • Datei: URL des Stylesheets zu injizieren.
  • Code: Text des Stylesheets zu injizieren.

• Rückruf: die Funktion, die ausgeführt wird, nachdem die CSS injiziert wird.

Unterstützte Plattformen

• Android
• BlackBerry
• iOS

Kleines Beispiel

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

Vollständiges Beispiel

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

Das Objekt, das an die Callback-Funktion von übergeben wird eine addEventListener aufrufen, auf ein InAppBrowser Objekt.

Eigenschaften

• Typ: Eventname, entweder loadstart , loadstop , loaderror , oder exit . (String)

• URL: die URL, die geladen wurde. (String)

• Code: der Fehler-Code, nur im Fall von loaderror . (Anzahl)

• Nachricht: die Fehlermeldung angezeigt, nur im Fall von loaderror . (String)

---

window.open

Öffnet eine URL in einem neuen InAppBrowser Instanz, die aktuelle Browserinstanz oder der Systembrowser.

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

• Ref: Bezugnahme auf die InAppBrowser Fenster. (InAppBrowser)

• URL: die URL (String)zu laden. Rufen Sie encodeURI() auf diese Option, wenn die URL enthält Unicode-Zeichen.

• Ziel: das Ziel in der URL, einen optionalen Parameter geladen, die standardmäßig auf _self . (String)

  • _self: Öffnet sich in der Cordova WebView wenn der URL in der Whitelist ist, andernfalls es öffnet sich in derInAppBrowser.
  • _blank: Öffnet denInAppBrowser.
  • _system: Öffnet in den System-Web-Browser.

• Optionen: Optionen für die InAppBrowser . Optional, säumige an: location=yes . (String)

  Die options Zeichenfolge muss keine Leerstelle enthalten, und jede Funktion Name/Wert-Paare müssen durch ein Komma getrennt werden. Featurenamen Groß-/Kleinschreibung. Alle Plattformen unterstützen die anderen Werte:

  • Lage: Legen Sie auf yes oder no , machen die InAppBrowser der Adressleiste ein- oder ausschalten.

    Android nur

  • Closebuttoncaption - setzen Sie auf eine Zeichenfolge, die die Beschriftung für die Schaltfläche "Fertig" sein wird.

  • versteckte - legen Sie auf 'Ja', um den Browser zu erstellen und laden Sie die Seite, aber nicht zeigen. Das Load-Ereignis wird ausgelöst, wenn der Ladevorgang abgeschlossen ist. Lassen Sie, oder legen Sie auf "Nein" (Standard), den Browser öffnen und laden normalerweise zu haben.
  • Clearcache - legen Sie auf 'Ja', um den Browser Cookiecache gelöscht, wenn das neue Fenster geöffnet wird

  • Clearsessioncache - legen Sie auf 'Ja', um die Session Cookiecache gelöscht, wenn das neue Fenster geöffnet wird

    iOS nur

  • Closebuttoncaption - setzen Sie auf eine Zeichenfolge, die die Beschriftung für die Schaltfläche "Fertig" sein wird. Beachten Sie, dass Sie diesen Wert selbst lokalisieren.

  • versteckte - legen Sie auf 'Ja', um den Browser zu erstellen und laden Sie die Seite, aber nicht zeigen. Das Load-Ereignis wird ausgelöst, wenn der Ladevorgang abgeschlossen ist. Lassen Sie, oder legen Sie auf "Nein" (Standard), den Browser öffnen und laden normalerweise zu haben.
  • Symbolleiste - legen Sie auf "Ja" oder "Nein" zu die Symbolleiste aktivieren oder deaktivieren für die InAppBrowser (standardmäßig "Ja")
  • EnableViewportScale: Legen Sie auf yes oder no , Viewport Skalierung durch ein Meta-Tag (standardmäßig zu verhindernno).
  • MediaPlaybackRequiresUserAction: Legen Sie auf yes oder no , HTML5 audio oder video von automatisches Abspielen (standardmäßig zu verhindernno).
  • AllowInlineMediaPlayback: Legen Sie auf yes oder no Inline HTML5 Medienwiedergabe, anzeigen innerhalb des Browserfensters statt eine gerätespezifische Wiedergabe-Schnittstelle ermöglichen. Des HTML video Element muss auch die webkit-playsinline Attribut (Standard:no)
  • KeyboardDisplayRequiresUserAction: Legen Sie auf yes oder no , die Tastatur zu öffnen, wenn Formularelemente Fokus per JavaScript erhalten focus() Anruf (Standard:yes).
  • SuppressesIncrementalRendering: Legen Sie auf yes oder no zu warten, bis alle neuen Fensterinhalt empfangen wird, bevor Sie wiedergegeben wird (standardmäßigno).
  • Presentationstyle: Legen Sie auf pagesheet , formsheet oder fullscreen Präsentationsstil (standardmäßig festfullscreen).
  • Transitionstyle: Legen Sie auf fliphorizontal , crossdissolve oder coververtical Übergangsstil (standardmäßig festcoververtical).

Unterstützte Plattformen

• Android
• BlackBerry
• iOS
• Windows Phone 7 und 8

Kleines Beispiel

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

Vollständiges Beispiel

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