HTML in AIR

Adobe AIR 1.0 of hoger

AIR en WebKit definiëren een aantal niet-standaard HTML-elementen en -kenmerken, zoals:

Frame- en iframe-elementen in HTML

Gebeurtenishandlers voor HTML-elementen

Frame- en iframe-elementen in HTML

AIR voegt nieuwe kenmerken toe aan de frame- en iframe-elementen van inhoud in de toepassingssandbox:

Het kenmerk sandboxRoot
Het kenmerk sandboxRoot geeft een alternatief, niet-toepassingsbrondomein op voor het bestand dat wordt opgegeven door het framekenmerk src . Het bestand wordt geladen in de niet-toepassingssandbox die correspondeert met het opgegeven domein. Inhoud in het bestand en inhoud die wordt geladen van het opgegeven domein, kan onderling cross-scripten.
Belangrijk: Als u de waarde van sandboxRoot instelt op de basis-URL van het domein, worden alle aanvragen voor inhoud van dat domein geladen uit de toepassingsmap en niet vanaf de externe server (of die aanvraag nu resulteert uit paginanavigatie, uit een XMLHttpRequest of uit een andere manier om inhoud te laden).

Het kenmerk documentRoot
Het kenmerk documentRoot geeft de lokale map op waaruit URL's moeten worden geladen die worden omgezet in bestanden in de locatie die wordt opgegeven door sandboxRoot .

Bij het omzetten van URL's, of dit nu gebeurt bij het framekenmerk src dan wel in inhoud die in het frame wordt geladen, wordt het deel van de URL dat overeenkomt met de waarde die wordt opgegeven in sandboxRoot , vervangen door de waarde die wordt opgegeven in documentRoot . Bij de volgende frametag geldt dus:

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

child.html wordt geladen uit de submap sandbox van de toepassingsinstallatiemap. Relatieve URL's in child.html worden omgezet op basis van de map sandbox . Merk op dat bestanden op de externe server op www.example.com/air niet toegankelijk zijn in het frame, omdat AIR zou proberen ze te laden uit de map app:/sandbox/.

Het kenmerk allowCrossDomainXHR
Neem de code allowCrossDomainXHR="allowCrossDomainXHR" op in de openingsframetag als u wilt toestaan dat inhoud in het frame XMLHttpRequests uitvoert naar een willekeurig extern domein. Standaard kan niet-toepassingsinhoud dergelijke aanvragen alleen uitvoeren binnen het eigen brondomein. Het toestaan van XHR's naar andere domeinen heeft ernstige gevolgen voor de beveiliging. Code in de pagina kan gegevens uitwisselen met een willekeurig domein. Als er op de een of andere manier kwaadaardige inhoud in de pagina wordt ingebracht, kunnen alle gegevens die toegankelijk zijn voor code in de huidige sandbox, worden aangetast. Schakel alleen XHR's die andere domeinen kunnen bereiken in voor pagina's die u zelf maakt en beheert, en alleen als het laden van gegevens uit andere domeinen absoluut noodzakelijk is. Ook moet u alle externe gegevens die door de pagina worden geladen zorgvuldig valideren om te voorkomen dat code wordt ingebracht of dat andere aanvallen worden uitgevoerd.
Belangrijk: Als het kenmerk allowCrossDomainXHR is opgenomen in een frame- of iframe-element, zijn XHR's naar andere domeinen ingeschakeld (behalve als de toegewezen waarde "0" is of begint met de letter "f" of "n"). Als u bijvoorbeeld allowCrossDomainXHR instelt op " deny" (weigeren), zijn XHR's naar andere domeinen nog steeds toegestaan. Laat het kenmerk helemaal weg uit de elementdeclaratie als u aanvragen naar andere domeinen niet wilt inschakelen.

ondominitialize, kenmerk
Geeft een gebeurtenishandler op voor de framegebeurtenis dominitialize . Dit is een AIR-specifieke gebeurtenis die wordt geactiveerd wanneer de window- en document-objecten van het frame zijn gemaakt, maar voordat er scripts zijn geparseerd of documentelementen zijn gemaakt.

Het frame verzendt de gebeurtenis dominitialize zo vroeg tijdens de uitvoering van de laadsequentie, dat eventuele scripts in de onderliggende pagina kunnen verwijzen naar objecten, variabelen en functies die door de handler dominitialize zijn toegevoegd aan het onderliggende document. De bovenliggende pagina kan alleen rechtstreeks objecten toevoegen aan of toegang krijgen tot objecten in een onderliggend document, als de bovenliggende pagina zich bevindt in dezelfde sandbox als de onderliggende. Een bovenliggende pagina in de toepassingssandbox kan echter wel een sandboxbridge tot stand brengen voor communicatie met inhoud in een niet-toepassingssandbox.

In de volgende voorbeelden ziet u hoe u de iframe-tag in AIR gebruikt:

Plaats child.html in een externe sandbox zonder toewijzing aan een werkelijk domein op een externe server:

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

Plaats child.html in een externe sandbox, waarbij XMLHttpRequests alleen zijn toegestaan voor www.example.com :

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

Plaats child.html in een externe sandbox, waarbij XMLHttpRequests zijn toegestaan voor een willekeurig extern domein:

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

Plaats child.html in een lokaal-met-bestandssysteem sandbox:

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

Plaats child.html in een externe sandbox waarbij de gebeurtenis dominitialize wordt gebruikt om een sandboxbridge tot stand te brengen.

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

Het volgende document, child.html , illustreert hoe onderliggende inhoud de bovenliggende sandboxbridge kan benaderen:

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

Zie Cross-scripting van inhoud in verschillende beveiligingssandboxen en HTML-beveiliging in Adobe AIR voor meer informatie.

Gebeurtenishandlers voor HTML-elementen

DOM-objecten in AIR en WebKit verzenden sommige gebeurtenissen die zich niet in het standaard DOM-gebeurtenismodel bevinden. In de volgende tabel worden de verwante gebeurteniskenmerken aangegeven die u kunt gebruiken om handlers voor deze gebeurtenissen op te geven:

Naam callbackkenmerk

Beschrijving

oncontextmenu

Wordt opgeroepen wanneer een contextmenu wordt opgeroepen, bijvoorbeeld door met de rechtermuisknop op geselecteerde tekst te klikken of de Command-toets ingedrukt te houden tijdens het klikken.

oncopy

Wordt opgeroepen wanneer een selectie in een element wordt gekopieerd.

oncut

Wordt opgeroepen wanneer een selectie in een element wordt geknipt.

ondominitialize

Wordt opgeroepen wanneer het DOM wordt gemaakt van een document dat is geladen in een frame of iframe, maar voordat eventuele DOM-elementen worden gemaakt of scripts geparseerd.

ondrag

Wordt opgeroepen wanneer een element wordt gesleept.

ondragend

Wordt opgeroepen wanneer een gesleept element wordt losgelaten.

ondragenter

Wordt opgeroepen wanneer een sleepbeweging de grenzen van een element bereikt.

ondragleave

Wordt opgeroepen wanneer een sleepbeweging de grenzen van een element verlaat.

ondragover

Wordt continu opgeroepen zolang een sleepbeweging zich binnen de grenzen van een element bevindt.

ondragstart

Wordt opgeroepen wanneer een sleepbeweging begint.

ondrop

Wordt opgeroepen wanneer een sleepbeweging wordt losgelaten boven een element.

onerror

Wordt opgeroepen wanneer er een fout optreedt bij het laden van een element.

oninput

Wordt opgeroepen wanneer er tekst wordt ingevoerd in een formulierelement.

onpaste

Wordt opgeroepen wanneer een item wordt geplakt in een element.

onscroll

Wordt opgeroepen wanneer de inhoud van een schuifbaar element wordt geschoven.

onselectstart

Wordt opgeroepen wanneer een selectie begint.

Het HTML-kenmerk contentEditable

U kunt het kenmerk contentEditable aan een willekeurig HTML-element toevoegen om gebruikers toe te staan de inhoud van het element te bewerken. Met de volgende HTML-voorbeeldcode wordt het gehele document ingesteld als bewerkbaar, behalve het eerste p -element:

<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>
Opmerking: Als u de eigenschap document.designMode instelt op on , zijn alle elementen in het document bewerkbaar, ongeacht de instelling van contentEditable voor een individueel element. Als u echter designMode instelt op off , kunnen elementen waarvoor contentEditable is ingesteld op true , nog steeds worden bewerkt. Zie De eigenschap Document.designMode voor meer informatie.

URL's met 'data:'

AIR biedt ondersteuning voor URL's met data: voor de volgende elementen:

  • img

  • invoertype=”image”

  • CSS-regels die afbeeldingen toestaan (bijvoorbeeld 'background-image')

Met URL's met 'data:' kunt u binaire afbeeldingsgegevens direct invoegen in een CSS- of HTML-document als een base64-gecodeerde tekenreeks In het volgende voorbeeld wordt een URL met 'data:' gebruikt als een zich herhalende achtergrond:

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

Bij het gebruik van URL's met 'data:' is een extra witruimte relevant. De gegevenstekenreeks moet bijvoorbeeld worden ingevoerd als een enkele, niet-onderbroken regel. Anders worden de regeleinden geïnterpreteerd als onderdeel van de gegevensset en kan de afbeelding niet worden gedecodeerd.