HTML in AIR

Adobe AIR 1.0 und höher

AIR und WebKit definieren einige vom Standard abweichende HTML-Elemente und -Attribute, darunter:

HTML-Frame- und iFrame-Elemente

HTML-Element-Ereignisprozeduren

HTML-Frame- und iFrame-Elemente

AIR fügt neue Attribute zu den frame- und iframe-Elementen von Inhalten in der Anwendungs-Sandbox hinzu:

sandboxRoot-Attribut
Das Attribut sandboxRoot gibt eine alternative, anwendungsfremde Ursprungsdomäne für die vom frame-Attribut src angegebene Datei an. Die Datei wird in die der Domäne entsprechenden anwendungsfremden Sandbox geladen. Inhalte in der Datei und aus der angegebenen Domäne geladene Inhalte können in Skripten gegenseitig aufeinander Bezug nehmen.
Wichtig: Wenn Sie den Wert von sandboxRoot auf die Basis-URL der Domäne setzen, werden alle Anforderungen nach Inhalten dieser Domäne aus dem Anwendungsverzeichnis anstelle des Remote-Servers geladen (unabhängig davon, ob diese Anforderung durch eine Seitennavigation, eine XMLHttpRequest oder ein anderes Verfahren für das Laden von Inhalten ausgelöst wurde).

documentRoot-Attribut
Das Attribut documentRoot gibt das lokale Verzeichnis an, von dem URLs geladen werden, die innerhalb des durch sandboxRoot angegebenen Verzeichnisses zu Dateien aufgelöst werden.

Bei der Auflösung von URLs im frame-Attribut src oder in in den Frame geladene Inhalte, wird der Teil der URL, der dem in sandboxRoot angegebenen Wert entspricht, durch den in documentRoot angegebenen Wert ersetzt. Somit wird mit dem folgenden frame-Tag:

<iframe        src="http://www.example.com/air/child.html"  
            documentRoot="app:/sandbox/" 
            sandboxRoot="http://www.example.com/air/"/>

child.html aus dem Unterverzeichnis sandbox des Anwendungsinstallationsordners geladen. Relative URLs in child.html werden auf Grundlage des Verzeichnisses sandbox aufgelöst. Beachten Sie, dass auf Dateien auf dem Remote-Server unter www.example.com/air nicht im Frame zugegriffen werden kann, da AIR versuchen würde, die Dateien aus dem Verzeichnis „app:/sandbox/“ zu laden.

allowCrossDomainXHR-Attribut
Nehmen Sie in das Tag des einleitendes Frames die Angabe allowCrossDomainXHR="allowCrossDomainXHR" auf, damit Inhalte im Frame XMLHttpRequests an Remote-Domänen stellen können. Anwendungsfremde Inhalte können solche Anforderungen standardmäßig nur an die eigene Ursprungsdomäne stellen. Eine Ausweitung von XHRs über Domänen hinweg stellt weitreichende Herausforderungen an die Sicherheit. Code auf der Seite kann Daten mit beliebigen Domänen austauschen. Wurden auf irgendeinem Wege schädliche Inhalte in die Seite eingefügt, können die Daten, auf die durch Code in der aktuellen Sandbox zugegriffen werden kann, beschädigt werden. Aktivieren Sie domänenübergreifende XHRS daher nur für Seiten, die Sie erstellen und steuern und nur dann, wenn das Laden von Daten über Domänen hinweg wirklich erforderlich ist. Validieren Sie zudem alle externen Daten, die von der Seite geladen werden, um zu verhindern, dass Code eingefügt wird oder andere Angriffe auf die Seite ausgeübt werden.
Wichtig: Wurde das Attribut allowCrossDomainXHR in ein frame- oder iframe-Element aufgenommen, sind domänenübergreifende XHR-Anforderungen aktiviert (es sei denn, der zugewiesene Wert ist „0“ oder beginnt mit den Buchstaben „f“ oder „n“). Durch das Setzen von allowCrossDomainXHR auf „ deny" wären domänenübergreifende XHR-Anforderungen zum Beispiel immer noch möglich. Nehmen Sie das Attribut nicht in die Element-Deklaration auf, wenn Sie keine domänenübergreifenden Anforderungen zulassen wollen.

ondominitialize-Attribut
Gibt die Prozedur für das Ereignis dominitialize eines Frames an. Dieses Ereignis ist ein AIR-spezifisches Ereignis, das ausgelöst wird, wenn die Window- und Document-Objekte des Frames erstellt wurden, jedoch noch keine Skripts übergeben oder Document-Elemente erstellt wurden.

Der Frame löst das Ereignis dominitialize früh genug während der Ladesequenz aus, sodass Skripts in der untergeordneten Seite auf Objekte, Variablen und Funktionen verweisen können, die durch die Prozedur dominitialize zum untergeordneten Dokument hinzugefügt wurden. Die übergeordnete Seite muss sich in derselben Sandbox wie die untergeordnete Seite befinden, damit Objekte in einem untergeordneten Dokument direkt hinzugefügt werden können oder auf sie zugegriffen werden kann. Eine übergeordnete Seite in der Anwendungs-Sandbox kann jedoch eine Sandbox-Brücke erstellen, um mit Inhalten in einer anwendungsfremden Sandbox zu kommunizieren.

Im folgenden Beispiel wird die Verwendung des iframe-Tags in AIR dargestellt:

Platzieren Sie child.html in einer Remote-Sandbox, ohne eine Zuordnung zu einer tatsächlichen Domäne auf einem Remote-Server zu erstellen:

<iframe        src="http://localhost/air/child.html"  
            documentRoot="app:/sandbox/" 
            sandboxRoot="http://localhost/air/"/>

Platzieren Sie child.html in einer Remote-Sandbox und gestatten Sie XMLHttpRequest-Anforderungen nur für www.example.com :

<iframe        src="http://www.example.com/air/child.html"  
            documentRoot="app:/sandbox/" 
            sandboxRoot="http://www.example.com/air/"/>

Platzieren Sie child.html in einer Remote-Sandbox und gestatten Sie XMLHttpRequest-Anforderungen an beliebige Remote-Domänen:

<iframe        src="http://www.example.com/air/child.html"  
            documentRoot="app:/sandbox/" 
            sandboxRoot="http://www.example.com/air/" 
            allowCrossDomainXHR="allowCrossDomainXHR"/>

Platzieren Sie child.html in einer local-with-filesystem-Sandbox:

<iframe             src="file:///templates/child.html"  
            documentRoot="app:/sandbox/" 
            sandboxRoot="app-storage:/templates/"/>

Platzieren Sie child.html in einer Remote-Sandbox und verwenden Sie das Ereignis dominitialize , um eine Sandbox-Brücke zu erstellen:

<html> 
<head> 
<script> 
var bridgeInterface = {}; 
bridgeInterface.testProperty = "Bridge engaged"; 
function engageBridge(){ 
    document.getElementById("sandbox").parentSandboxBridge = bridgeInterface; 
} 
</script> 
</head> 
<body> 
<iframe id="sandbox" 
            src="http://www.example.com/air/child.html"  
            documentRoot="app:/" 
            sandboxRoot="http://www.example.com/air/" 
            ondominitialize="engageBridge()"/> 
</body> 
</html>

Das folgende child.html -Dokument verdeutlicht, wie untergeordnete Inhalte auf die übergeordnete Sandbox-Brücke zugreifen können:

<html> 
    <head> 
        <script> 
            document.write(window.parentSandboxBridge.testProperty); 
        </script>   
    </head>   
    <body></body> 
</html>

Weitere Informationen finden Sie unter Cross-Scripting von Inhalten in unterschiedlichen Sicherheits-Sandboxen und HTML-Sicherheit in Adobe AIR .

HTML-Element-Ereignisprozeduren

DOM-Objekte in AIR und WebKit lösen verschiedene Ereignisse aus, die im Standard-DOM-Ereignismodell nicht zur Verfügung stehen. In der folgenden Tabelle werden die damit zusammenhängenden Ereignisattribute aufgeführt, die Sie einsetzen können, um Prozeduren für diese Ereignisse festzulegen:

Name des Rückrufattributs

Beschreibung

oncontextmenu

Wird aufgerufen, wenn ein Kontextmenü durch eine Aktion wie einen rechten Mausklick auf dem ausgewählten Text, aufgerufen wird.

oncopy

Wird aufgerufen, wenn eine Auswahl in einem Element kopiert wird.

oncut

Wird aufgerufen, wenn eine Auswahl in einem Element ausgeschnitten wird.

ondominitialize

Wird aufgerufen, wenn das DOM eines in einen Frame oder iFrame geladenen Dokuments erstellt wird, jedoch bevor DOM-Elemente erstellt oder Skripts analysiert werden.

ondrag

Wird beim Ziehen eines Elements aufgerufen.

ondragend

Wird aufgerufen, wenn das gezogene Element losgelassen wird.

ondragenter

Wird aufgerufen, wenn eine Ziehbewegung über die Begrenzung eines Elements geführt wird.

ondragleave

Wird aufgerufen, wenn eine Ziehbewegung die Begrenzung eines Elements verlässt.

ondragover

Wird wiederholt aufgerufen, während eine Ziehbewegung innerhalb der Begrenzung eines Elements geführt wird.

ondragstart

Wird zu Beginn einer Ziehbewegung aufgerufen.

ondrop

Wird aufgerufen, wenn eine Ziehbewegung über einem Element abgebrochen wird.

onerror

Wird aufgerufen, wenn während des Ladens eines Elements ein Fehler auftritt.

oninput

Wird aufgerufen, wenn Text in ein Formularelement eingegeben wird.

onpaste

Wird aufgerufen, wenn ein Eintrag in ein Element eingefügt wird.

onscroll

Wird aufgerufen, wenn durch die Inhalte eines scrollbaren Elements gescrollt wird.

onselectstart

Wird zu Beginn einer Auswahl aufgerufen.

HTML-Attribut contentEditable

Sie können das Attribut contentEditable zu jedem beliebigen HTML-Attribut hinzufügen, um Benutzern die Möglichkeit zu geben, die Inhalte des Elements zu bearbeiten. Mit dem folgenden HTML-Code wird beispielsweise das gesamte Dokument als editierbar definiert, mit Ausnahme des ersten p -Elements:

<html> 
<head/> 
<body contentEditable="true"> 
    <h1>de Finibus Bonorum et Malorum</h1> 
    <p contentEditable="false">Sed ut perspiciatis unde omnis iste natus error.</p> 
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis.</p> 
</body> 
</html>
Hinweis: Wenn Sie die Eigenschaft document.designMode auf on setzen, sind alle Elemente des Dokuments editierbar, unabhängig davon, ob für ein einzelnes Element contentEditable gesetzt wurde. Wird jedoch designMode auf off gesetzt, bleiben Elemente, für die contentEditable auf true gesetzt wurde, weiterhin editierbar. Weitere Informationen finden Sie unter Die Eigenschaft Document.designMode .

Data:-URLs

AIR unterstützt data: -URLs für die folgenden Elemente:

  • img

  • Eingabetyp=„image“

  • CSS-Regeln, die Bilder (wie Hintergrundbilder) zulassen

Mithilfe von Data-URLs können Sie Binärdaten für Bilder als base64-kodierten String direkt in ein CSS- oder HTML-Dokument einfügen. Im folgenden Beispiel wird ein data:-URL für einen sich wiederholenden Hintergrund verwendet:

<html> 
<head> 
<style> 
body { 
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF%2F6cA%2F%2F%2F%2Fgxp3lwAAAAJ0Uk5T%2FwDltzBKAAABF0lEQVR42uzZQQ7CMAxE0e%2F7X5oNCyRocWzPiJbMBZ6qpIljE%2BnwklgKG7kwUjc2IkIaxkY0CPdEsCCasws6ShXBgmBBmEagpXQQLAgWBAuSY2gaKaWPYEGwIEwg0FRmECwIFoQeQjJlhJWUEFazjFDJCkI5WYRWMgjtfEGYyQnCXD4jTCdm1zmngFpBFznwVNi5RPSbwbWnpYr%2BBHi%2FtCTfgPLEPL7jBctAKBRptXJ8M%2BprIuZKu%2BUKcg4YK1PLz7kx4bSqHyPaT4d%2B28OCJJiRBo4FCQsSA0bziT3XubMgYUG6fc5fatmGBQkL0hoJ1IaZMiQsSFiQ8vRscTjlQOI2iHZwtpHuf%2BJAYiOiJSkj8Z%2FIQ4ABANvXGLd3%2BZMrAAAAAElFTkSuQmCC'); 
background-repeat:repeat; 
} 
</style> 
</head> 
<body> 
</body> 
</html>

Achten Sie bei Verwendung von data:-URLs darauf, dass zusätzliche Leerräume von Bedeutung sind. So muss der Datenstring als einzelne Zeile ohne Unterbrechung eingegeben werden. Andernfalls werden die Zeilenumbrüche als Teil der Daten interpretiert und das Bild kann nicht dekodiert werden.