HTML en AIR

Adobe AIR 1.0 y posterior

AIR y WebKit definen algunos elementos y atributos de HTML que no son estándar, entre ellos:

Elementos frame e iframe de HTML

Controladores de eventos de elementos HTML

Elementos frame e iframe de HTML

AIR añade nuevos atributos a los elementos frame e iframe del contenido en el entorno limitado de la aplicación:

Atributo sandboxRoot
El atributo sandboxRoot especifica otro dominio de origen, ajeno a la aplicación, para el archivo especificado por el atributo src del fotograma. El archivo se carga en el entorno limitado externo que corresponde al dominio especificado. El contenido del archivo y el contenido cargado desde el dominio especificado pueden usar scripts entre sí.
Importante: si se define el valor de sandboxRoot en la URL de base del dominio, toda petición de contenido desde ese dominio se carga desde el directorio de la aplicación en lugar del servidor remoto (sea esa petición el resultado de visitas a distintas páginas, de una petición XMLHttpRequest o de cualquier otro medio de cargar contenido).

Atributo documentRoot
El atributo documentRoot especifica el directorio local del cual cargar las URL que se resuelven en archivos en el lugar especificado en sandboxRoot .

Al resolver las URL, sea en el atributo src del fotograma o en contenido cargado en el fotograma, la parte de la URL que coincide con el valor especificado en sandboxRoot se sustituye por el valor especificado en documentRoot . Por lo tanto, en la siguiente etiqueta de fotograma:

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

child.html se carga desde el subdirectorio sandbox de la carpeta de instalación de la aplicación. Las URL relativas en child.html se resuelven partiendo de la base del directorio sandbox . Obsérvese que no se tiene acceso desde el fotograma a los archivos que se encuentren en el servidor remoto en www.example.com/air , puesto que AIR intentaría cargarlos desde el directorio app:/sandbox/.

Atributo allowCrossDomainXHR
Para permitir que el contenido del fotograma realice peticiones del tipo XMLHttpRequests a cualquier dominio remoto, incluya el atributo allowCrossDomainXHR="allowCrossDomainXHR" en la etiqueta "frame" inicial. De forma predeterminada, el contenido ajeno a la aplicación solo puede realizar estas peticiones a su propio dominio de origen. Admitir peticiones XHR entre dominios conlleva graves implicaciones para la seguridad. El código de la página puede intercambiar datos con cualquier dominio. Si llegara a infiltrarse contenido malintencionado en la página, podrían verse comprometidos los datos que son accesibles al código en el entorno limitado actual. Habilite las peticiones XHR entre dominios solamente para las páginas que cree y controle usted mismo y solo cuando realmente resulte necesario cargar datos entre distintos dominios. También conviene validar cuidadosamente todos los datos externos que cargue la página para impedir la infiltración de código dañino u otra clase de ataque.
Importante: si el elemento frame o iframe incluye el atributo allowCrossDomainXHR , significa que están habilitadas las peticiones XHR entre dominios (a menos que el valor asignado sea "0" o empiece con la letra "f" o "n"). Por ejemplo, si se define allowCrossDomainXHR en " deny" , aún estarían habilitadas las XHR entre dominios. Si no desea habilitar las peticiones entre dominios, omita el atributo de la declaración del elemento.

Atributo ondominitialize
Especifica un controlador de eventos para el evento dominitialize de un fotograma. Este evento es específico de AIR y se activa cuando se han creado los objetos de ventana y de documento del fotograma, pero antes de que se hayan analizado los scripts o creado los elementos de documento.

El fotograma distribuye el evento dominitialize lo bastante temprano en la secuencia de carga para que todo script en la página secundaria pueda hacer referencia a los objetos, variables y funciones que añada al documento secundario el controlador del evento dominitialize . Para poder añadir o tener acceso a los objetos de un documento secundario, la página principal debe encontrarse en el mismo entorno limitado que la página secundaria. No obstante, una página principal que esté en el entorno limitado de la aplicación puede establecer un puente de entorno limitado para tener comunicación con el contenido de un entorno limitado externo.

Los ejemplos siguientes muestran el uso de la etiqueta iframe en AIR:

Para colocar el documento child.html en un entorno limitado remoto sin asignarlo a un dominio real en un servidor remoto:

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

Para colocar el documento child.html en un entorno limitado remoto y habilitar las peticiones del tipo XMLHttpRequests solamente a www.example.com :

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

Para colocar el documento child.html en un entorno limitado remoto y habilitar las peticiones del tipo XMLHttpRequests a cualquier dominio remoto:

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

Para colocar el documento child.html en un entorno limitado local con sistema de archivos:

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

Para colocar el documento child.html en un entorno limitado remoto, utilizando el evento dominitialize para establecer un puente de entorno limitado:

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

El siguiente documento child.html muestra cómo el contenido secundario puede acceder al puente de entorno limitado principal:

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

Para obtener más información, consulte Uso de scripts entre contenidos en diferentes entornos limitados de seguridad y Seguridad HTML en Adobe AIR .

Controladores de eventos de elementos HTML

Los objetos DOM en AIR y WebKit distribuyen algunos eventos que no se encuentran en el modelo de eventos DOM estándar. En la tabla siguiente se enumeran los atributos de eventos relacionados que se pueden utilizar para especificar los controladores para estos eventos:

Nombre de atributo de callback

Descripción

oncontextmenu

Se llama cuando se invoca un menú contextual, por ejemplo cuando se hace clic en texto seleccionado con el botón derecho o con la tecla Comando pulsada.

oncopy

Se llama al copiar una selección en un elemento.

oncut

Se llama al cortar una selección en un elemento.

ondominitialize

Se llama al crear el DOM de un documento cargado en un fotograma o iframe, pero antes de crear los elementos del DOM o de analizar los scripts.

ondrag

Se llama al arrastrar un elemento.

ondragend

Se llama al soltar un elemento arrastrado.

ondragenter

Se llama cuando un gesto de arrastrar entra en un elemento.

ondragleave

Se llama cuando un gesto de arrastrar sale de un elemento.

ondragover

Se llama continuamente cuando un gesto de arrastrar se encuentra dentro de los límites de un elemento.

ondragstart

Se llama al iniciarse un gesto de arrastrar.

ondrop

Se llama al soltarse el gesto de arrastrar estando sobre un elemento.

onerror

Se llama cuando se produce un error al cargar un elemento.

oninput

Se llama al introducir texto en un elemento de formulario.

onpaste

Se llama al pegar un artículo en un elemento.

onscroll

Se llama al desplazarse el contenido de un elemento desplazable.

onselectstart

Se llama al iniciarse una selección.

Atributo HTML contentEditable

El atributo contentEditable puede añadirse a cualquier elemento HTML para permitir que los usuarios modifiquen el contenido del elemento. Por ejemplo, en el siguiente ejemplo el código HTML define todo el documento como editable, a excepción del primer elemento p :

<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>
Nota: si la propiedad document.designMode se define en on , todos los elementos del documento serán modificables, independientemente de la configuración de contentEditable para un elemento individual. Sin embargo, la definición de designMode en off , no inhabilita la edición de elementos para los que el atributo contentEditable está definido en true . Para obtener más información, consulte Propiedad Document.designMode .

URL data:

AIR admite URL data: para los siguientes elementos:

  • img

  • input type=“image”

  • Reglas CSS que admitan imágenes (como background-image)

Las URL data: permiten insertar datos de imagen binarios directamente en un documento CSS o HTML como cadena con codificación base64. El siguiente ejemplo utiliza una URL data: como fondo repetido:

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

Cuando utilice URL data:, no olvide que un espacio en blanco tiene importancia. Por ejemplo, la cadena de datos debe introducirse como una sola línea sin saltos. En caso contrario, los saltos de línea se tratan como parte de los datos y no es posible descodificar la imagen.