AIR’de HTML

Adobe AIR 1.0 ve üstü

AIR ve WebKit, aşağıdakiler de dahil olmak üzere, standart olmayan birkaç HTML öğesi ve niteliği tanımlar:

HTML kare ve iframe öğeleri

HTML öğesi olay işleyicileri

HTML kare ve iframe öğeleri

AIR, uygulama sanal alanındaki içeriğin kare ve iframe öğelerine yeni nitelikler ekler:

sandboxRoot niteliği
sandboxRoot niteliği, kare src niteliği tarafından belirtilen dosya için alternatif, uygulama dışı bir kaynak etki alanı belirtir. Dosya, belirtilen etki alanına karşılık gelen uygulama dışı sanal alana yüklenir. Dosyadaki içerik ve belirtilen etki alanından yüklenen içerik, birbirlerinin çapraz dosyasını oluşturabilir.
Önemli: sandboxRoot değerini etki alanının temel URL'sine ayarlarsanız, bu etki alanından gelen tüm içeriğe yönelik istekler uzak sunucu yerine uygulama dizininden yüklenir (isteğin sayfa gezinmesinden mi, XMLHttpRequest öğesinden mi, yoksa başka içerik yükleme yollarından mı kaynaklandığına bakılmaksızın).

documentRoot niteliği
documentRoot niteliği, sandboxRoot tarafından belirtilen konumdaki dosyalara çözülen URL'lerin yükleneceği yerel dizini belirtir.

URL'leri çözerken, kare src niteliğinde veya kareye yüklenen içerikte, URL'nin sandboxRoot öğesinde belirtilen değerle eşleşen bölümü documentRoot öğesinde belirtilen değerle değiştirilir. Bu nedenle aşağıdaki kare etiketinde:

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

child.html, uygulama yükleme klasörünün sandbox altdizininden yüklenir. child.html içerisindeki göreceli URL'ler, sandbox dizini temel alınarak çözülür. AIR, dosyaları app:/sandbox/ dizininden yükleme girişiminde bulunacağı için, www.example.com/air adresinde bulunan uzak sunucudaki tüm dosyalara kareden erişilemediğini unutmayın.

allowCrossDomainXHR niteliği
Karedeki içeriğin herhangi bir uzak etki alanına XMLHttpRequest'leri yapmasını sağlamak için, allowCrossDomainXHR="allowCrossDomainXHR" öğesini açılış kare etiketine dahil edin. Varsayılan olarak uygulama dışı içerik, yalnızca kendi kaynak etki alanından bu tür isteklerde bulunabilir. Bunlar etki alanları arası XHR'lere izin vermekten doğan ciddi güvenlik sonuçlarıdır. Sayfadaki kod, herhangi bir etki alanıyla veri alışverişi yapabilir. Kötü amaçlı içerik bir şekilde sayfaya dahil olursa, geçerli sanal alanda kodun erişimi olan tüm veriler tehlikeye girebilir. Etki alanları arası XHR'leri yalnızca oluşturduğunuz ve kontrol ettiğiniz sayfalarda ve yalnızca etki alanları arası veri yükleme gerçekten gerekli olduğunda etkinleştirin. Ayrıca, kod dahil etmeyi veya başka yollarla yapılan saldırıları önlemek için, sayfa tarafından yüklenen tüm harici verileri dikkatli bir şekilde doğrulayın.
Önemli: allowCrossDomainXHR niteliği bir kare veya iframe öğesine dahil edilmişse, etki alanları arası XHR'ler etkindir (atanan değer "0" olmadığı veya "f" ya da "n" harfleriyle başlamadığı sürece). Örneğin, allowCrossDomainXHR değerini "deny" olarak ayarlamak da etki alanları arası XHR'leri etkinleştirir. Etki alanları arası istekleri etkinleştirmek istemiyorsanız, niteliği tamamen öğe bildiriminin dışında bırakın.

ondominitialize niteliği
Bir karenin dominitialize olayının olay işleyicisini belirtir. Bu olay, karenin pencere ve belge nesneleri oluşturulduğunda ancak herhangi bir komut dosyası ayrıştırılmadan veya belge öğeleri oluşturulmadan önce çalışan, AIR'ye özgü bir olaydır.

Kare, dominitialize olayını yükleme dizisinde, alt sayfadaki komut dosyaları alt belgeye dominitialize işleyicisi tarafından eklenen nesnelere, değişkenlere ve işlevlere başvurmadan önce, yeterince erken bir zamanda gönderir. Bir alt belgeye doğrudan nesne eklemek veya alt belgedeki nesnelere doğrudan erişmek için üst sayfayla alt sayfa aynı sanal alanda bulunmalıdır. Ancak uygulama sanal alanındaki bir üst öğe, uygulama dışı sanal alandaki içerikle iletişim kurmak için sanal alan köprüsü kurabilir.

Aşağıdaki örnekler iframe etiketinin AIR'deki kullanımını gösterir:

child.html öğesini, uzak sunucudaki gerçek bir etki alanına eşlemeden uzak sanal alana yerleştirin:

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

child.html öğesini, XMLHttpRequest'lerinin yalnızca www.example.com adresine yapılmasına izin vererek uzak sanal alana yerleştirin:

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

child.html öğesini, XMLHttpRequest'lerinin herhangi bir uzak etki alanına yapılmasına izin vererek uzak sanal alana yerleştirin:

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

child.html öğesini dosya sistemiyle yerel sanal alana yerleştirin:

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

child.html öğesini, sanal alan köprüsü kurmak için dominitialize olayını kullanarak uzak sanal alana yerleştirin:

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

Aşağıdaki child.html belgesi, alt içeriğin üst sanal alan köprüsüne nasıl erişebileceğini gösterir:

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

Daha fazla bilgi için, bkz. Farklı güvenlik sanal alanlarında çapraz komut dosyası içeriği ve Adobe AIR'de HTML güvenliği.

HTML öğesi olay işleyicileri

AIR ve Webkit'teki DOM nesneleri, standart DOM olayı modelinde bulunmayan bazı olayları gönderir. Aşağıdaki tablo, bu olaylara işleyici belirtmek için kullanabileceğiniz ilgili olay niteliklerini listeler.

Callback nitelik adı

Açıklama

oncontextmenu

Seçili metinde sağ tıklatılarak veya komut tuşuna basıp tıklatılarak bir bağlam menüsü çağrıldığında çağrılır.

oncopy

Bir öğedeki seçim kopyalandığında çağrılır.

oncut

Bir öğedeki seçim kesildiğinde çağrılır.

ondominitialize

Bir kareye veya iframe'e yüklenen belgenin DOM'si oluşturulduğunda, ancak bir DOM öğesi oluşturulmadan veya komut dosyaları ayrıştırılmadan çağrılır.

ondrag

Bir öğe sürüklendiğinde çağrılır.

ondragend

Sürükleme işlemi bırakıldığında çağrılır.

ondragenter

Sürükleme hareketi bir öğenin sınırlarına girdiğinde çağrılır.

ondragleave

Sürükleme hareketi bir öğenin sınırlarından çıktığında çağrılır.

ondragover

Sürükleme hareketi bir öğenin sınırları içerisindeyken sürekli çağrılır.

ondragstart

Sürükleme hareketi başladığında çağrılır.

ondrop

Bir öğenin üzerindeyken sürükleme hareketi bırakıldığında çağrılır.

onerror

Bir öğe yüklenirken hata oluştuğunda çağrılır.

oninput

Bir öğe biçimine metin girildiğinde çağrılır.

onpaste

Öğe, bir öğeye yapıştırıldığında çağrılır.

onscroll

Kaydırılabilir öğenin içeriği kaydırıldığında çağrılır.

onselectstart

Bir seçim başladığında çağrılır.

HTML contentEditable niteliği

Kullanıcıların öğenin içeriğini düzenlemelerine olanak sağlamak için, contentEditable niteliğini herhangi bir HTML öğesine ekleyebilirsiniz. Örneğin aşağıdaki örnek HTML kodu, ilk p öğe dışında belgenin tamamını düzenlenebilir olarak ayarlar:

<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>
Not: document.designMode özelliğini on olarak ayarlarsanız, tek bir öğe için contentEditable ayarına bakılmaksızın belgedeki tüm öğeler düzenlenebilir hale gelir. Ancak designMode özelliğini off olarak ayarlamak, contentEditable değerinin true olduğu öğelerin düzenlenme özelliğini devre dışı bırakmaz. Ek bilgi için bkz. Document.designMode özelliği.

Veri: URL’ler

AIR aşağıdaki öğeler için data: URL’lerini destekler:

  • img

  • input type=”image”

  • Görüntülere (arka plan görüntüsü gibi) izin veren CSS kuralları

Data URL’leri bir CSS veya HTML belgesine ikili görüntü verilerini base64 kodlu dize olarak doğrudan eklemenize imkan verir. Aşağıdaki örnekte, tekrarlayan arka plan olarak bir data: URL kullanılmaktadır:

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

data: URL’lerini kullanırken, fazladan bir boşluk gerektiğini unutmayın. Örneğin, veri dizesi tek ve aralıksız bir satır olarak girilmelidir. Aksi takdirde, satır kesmeleri verinin parçası olarak görülür ve görüntünün kodu çözülemez.