HTML en AIR

Adobe AIR 1.0 y posterior

Elementos frame e iframe de HTML
Controladores de eventos de elementos HTML
Atributo HTML contentEditable
URL data:

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

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 sólo 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 sólo 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.