HTML no AIR

Adobe AIR 1.0 e posterior

Elementos HTML frame e iframe
Manipuladores de eventos de elementos HTML
Atributo contentEditable HTML
Dados: URLs

O AIR e o WebKit definem alguns atributos e elementos HTML não-padrão, incluindo:

Manipuladores de eventos de elementos HTML

Elementos HTML frame e iframe

O AIR adiciona novos atributos aos elementos frame e iframe de conteúdo na caixa de proteção do aplicativo:

Atributo sandboxRoot

O atributo sandboxRoot especifica um domínio de origem alternativo que não seja de aplicativo para o arquivo especificado pelo atributo src do frame. O arquivo é carregado na caixa de proteção que não seja de aplicativo correspondente ao domínio especificado. O conteúdo no arquivo e o conteúdo carregado do domínio especificado podem cruzar scripts entre si.

Importante: Se você definir o valor de sandboxRoot para a URL base do domínio, todas as solicitações para conteúdo desse domínio serão carregadas do diretório do aplicativo, e não do servidor remoto (resulte a solicitação de navegação de página, de um XMLHttpRequest ou de qualquer outro meio de carregar conteúdo).

Atributo documentRoot

O atributo documentRoot especifica o diretório local a partir do qual carregar URLs que procuram endereços para arquivos no local especificado por sandboxRoot.

Ao consultar endereços de URLs, no atributo src do frame ou no conteúdo carregado no frame, a parte da URL que corresponde ao valor especificado em sandboxRoot é substituída pelo valor especificado em documentRoot. Portanto, na seguinte tag de frame:

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

child.html é carregado do subdiretório sandbox da pasta de instalação do aplicativo. Os endereços das URLs relativas em child.html são procurados com base no diretório sandbox. Observe que qualquer arquivo no servidor remoto em www.example.com/air não pode ser acessado no frame, uma vez que o AIR tentaria carregá-lo do diretório app:/sandbox/.

Atributo allowCrossDomainXHR

Inclua allowCrossDomainXHR="allowCrossDomainXHR" na tag de frame de abertura para permitir que o conteúdo no frame faça XMLHttpRequests para qualquer domínio remoto. Por padrão, o conteúdo que não é de aplicativo apenas pode fazer tais solicitações em seu próprio domínio de origem. Existem implicações de segurança sérias envolvidas na permissão de XHRs entre domínios. O código da página pode trocar dados com qualquer domínio. Se o conteúdo mal-intencionado é de certa forma injetado na página, qualquer dado acessível para código na caixa de proteção atual pode ficar comprometido. Apenas ative XHRs entre domínios para páginas que você cria e controla e somente quando o carregamento de dados entre domínios for realmente necessário. Além disso, valide cuidadosamente todos os dados externos carregados pela página para impedir a injeção de dados ou outras formas de ataque.

Importante: Se o atributo allowCrossDomainXHR for incluído em um elemento frame ou iframe, XHRs entre domínios serão ativados (a menos que o valor atribuído seja "0" ou comece com as letras "f" ou "n"). Por exemplo, definir allowCrossDomainXHR como "deny" ainda ativaria XHRs entre domínios. Deixe o atributo totalmente fora da declaração do elemento se não desejar ativar solicitações entre domínios.

Atributo ondominitialize

Especifica um manipulador de eventos para o evento dominitialize de um frame. Esse é um evento específico do AIR disparado quando os objetos window e document do frame tiverem sido criados, mas antes que qualquer script tenha sido analisado ou elementos document tenham sido criados.

O frame despacha o evento dominitialize cedo o suficiente na seqüência de carregamento de forma que qualquer script na página filha possa se referir a objetos, variáveis e funções adicionadas ao documento filho pelo manipulador dominitialize. A página pai deve estar na mesma caixa de proteção da filha para adicionar ou acessar diretamente qualquer objeto em um documento filho. No entanto, um pai na caixa de proteção do aplicativo pode estabelecer uma ponte de caixa de proteção para se comunicar com conteúdo em uma caixa de proteção que não seja de aplicativo.

Os exemplos a seguir ilustram o uso da tag iframe no AIR:

Coloque child.html em uma caixa de proteção remota, sem mapear para um domínio real em um servidor remoto:

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

Coloque child.html em uma caixa de proteção remota, permitindo XMLHttpRequests apenas para www.example.com:

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

Coloque child.html em uma caixa de proteção remota, permitindo XMLHttpRequests para qualquer domínio remoto:

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

Coloque child.html em uma caixa de proteção local com sistema de arquivos:

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

Coloque child.html em uma caixa de proteção remota, usando o evento dominitialize para estabelecer uma ponte de caixa de proteção:

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

O seguinte documento child.html ilustra como o conteúdo filho pode acessar a ponte da caixa de proteção pai:

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

Para obter mais informações, consulte Conteúdo cross-scripting em caixas de proteção de segurança distintas e Segurança HTML no Adobe AIR.

Manipuladores de eventos de elementos HTML

Os objetos DOM no AIR e no Webkit despacham alguns eventos não encontrados no modelo de eventos DOM padrão. A tabela a seguir lista os atributos de eventos relacionados que podem ser usados para especificar manipuladores para estes eventos:

Nome do atributo de retorno de chamada	Descrição
oncontextmenu	Chamado quando um menu de contexto é invocado, como pelo clique do botão direito do mouse ou clique da tecla Command no texto selecionado.
oncopy	Chamado quando uma seleção em um elemento é copiada.
oncut	Chamado quando uma seleção em um elemento é cortada.
ondominitialize	Chamado quando o DOM de um documento carregado em um frame ou iframe é criado, mas antes que qualquer elemento de DOM seja criado ou script analisado.
ondrag	Chamado quando um elemento é arrastado.
ondragend	Chamado quando uma ação de arrastar é liberada.
ondragenter	Chamado quando um gesto de ação de arrastar entra nos limites de um elemento.
ondragleave	Chamado quando um gesto de ação de arrastar deixa os limites de um elemento.
ondragover	Chamado continuamente enquanto um gesto de ação de arrastar está dentro dos limites de um elemento.
ondragstart	Chamado quando um gesto de ação de arrastar é iniciado.
ondrop	Chamado quando um gesto de ação de arrastar é liberado sobre um elemento.
onerror	Chamado quando um erro ocorre ao carregar um elemento.
oninput	Chamado quanto o texto é inserido em um elemento de formulário.
onpaste	Chamado quando um item é colado em um elemento.
onscroll	Chamado quando o conteúdo de um elemento rolável é rolado.
onselectstart	Chamado quando uma seleção é iniciada.

Atributo contentEditable HTML

Você pode adicionar o atributo contentEditable a qualquer elemento HTML para permitir aos usuários editar o conteúdo do elemento. Por exemplo, o seguinte código de exemplo HTML define todo o documento como editável, exceto para o primeiro 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: Se você define a propriedade document.designMode como on, todos os elementos do documento são editáveis, independentemente da configuração de contentEditable para um elemento individual. No entanto, definir designMode como off não desativa a edição de elementos para os quais contentEditable é true. Consulte Propriedade Document.designMode para obter informações adicionais.

Dados: URLs

O AIR oferece suporte a URLs data: para os seguintes elementos:

img
tipo de entrada =”imagem”
Regras CSS que permitem imagens (por exemplo: imagens de fundo)

URLs de dados permitem que você insira dados de imagens binárias diretamente em um documento CSS ou HTML como em uma string codificada em base 64. O exemplo a seguir utiliza uma URL:dados como um segundo plano repetitivo.

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

Ao utilizar URLS: dados, saiba que espaços em branco extra são insignificantes. Por exemplo, a string de dados precisa ser inserida como uma linha única e sem quebra. Caso contrário, as quebras de linha serão tratadas como parte dos dados e a imagem não poderá ser decodificada.