AIR 中的 HTML

Adobe AIR 1.0 和更高版本

HTML frame 和 iframe 元素
HTML 元素事件处理函数
HTML contentEditable 属性
Data: URL

AIR 和 WebKit 定义了几个非标准 HTML 元素和属性，包括：

HTML frame 和 iframe 元素

HTML 元素事件处理函数

HTML frame 和 iframe 元素

AIR 向应用程序沙箱中的内容的 frame 和 iframe 元素添加了以下新属性：

sandboxRoot 属性

sandboxRoot 属性为帧的 src 属性指定的文件指定一个替代非应用程序原始域。该文件加载到与指定域对应的非应用程序沙箱中。该文件中的内容和从指定域加载的内容可以相互跨脚本访问对方。

重要说明：如果将 sandboxRoot 的值设置为该域的基本 URL，则从应用程序目录而不是远程服务器加载对该域中的内容的所有请求（无论相应请求是通过页导航、XMLHttpRequest 还是任何其他内容加载方式生成）。

documentRoot 属性

documentRoot 属性指定本地目录，将通过该目录加载解析到 sandboxRoot 指定的位置内文件的 URL。

当解析帧的 src 属性中或加载到帧中的内容中的 URL 时，与 sandboxRoot 中的指定值匹配的 URL 部分将替换为 documentRoot 中的指定值。因此，在以下 frame 标签中：

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

child.html 从应用程序安装文件夹的 sandbox 子目录加载。 child.html 中的相对 URL 基于 sandbox 目录进行解析。请注意，在此帧中无法访问位于 www.example.com/air 的远程服务器上的任何文件，这是因为 AIR 将尝试从 app:/sandbox/ 目录加载这些文件。

allowCrossDomainXHR 属性

在帧开始标签中包含 allowCrossDomainXHR="allowCrossDomainXHR" ，以便允许该帧中的内容对任何远程域执行 XMLHttpRequest 操作。默认情况下，非应用程序内容只能对其自身的原始域执行这样的请求。允许跨域 XHR 涉及严重的安全影响。页中的代码能够与任何域交换数据。如果由于某种原因向页注入恶意内容，则会削弱当前沙箱中可供代码访问的任何数据的安全性。仅当确实需要执行跨域数据加载时才仅针对您创建和控制的页启用跨域 XHR。此外，请仔细验证由页加载的所有外部数据，以防止代码注入或其他形式的攻击。

重要说明：如果 allowCrossDomainXHR 属性包含在 frame 或 iframe 元素中，则启用跨域 XHR（除非分配的值为“0”或者以字母“f”或“n”开头）。例如，将 allowCrossDomainXHR 设置为“ deny ” 仍将启用跨域 XHR。如果要禁用跨域请求，请将该属性完全置于元素声明之外。

ondominitialize 属性

为帧的 dominitialize 事件指定事件处理函数。该事件是在创建帧的窗口和文档对象之后以及在分析任何脚本或创建文档元素之前引发的特定于 AIR 的事件。

帧会在加载序列中尽早调度 dominitialize 事件，以使子页中的任何脚本均可引用由 dominitialize 处理函数添加到子文档的对象、变量和函数。父页必须与子页位于相同沙箱中才能直接添加或访问子文档中的任何对象。但是，应用程序沙箱中的父级可以建立沙箱桥，以便与非应用程序沙箱中的内容通信。

下面的示例演示 AIR 中 iframe 标签的用法：

在无需映射到远程服务器上的实际域的情况下将 child.html 放置到远程沙箱中：

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

在仅允许对 www.example.com 执行 XMLHttpRequest 的情况下将 child.html 放置到远程沙箱中：

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

在允许对任何远程域执行 XMLHttpRequest 的情况下将 child.html 放置到远程沙箱中：

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

将 child.html 放置到只能与本地文件系统内容交互的沙箱中：

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

使用 dominitialize 事件建立沙箱桥，并将 child.html 放置到远程沙箱中：

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

以下 child.html 文档说明子级内容如何访问父级沙箱桥：

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

有关详细信息，请参阅跨脚本访问不同安全沙箱中的内容和 Adobe AIR 中的 HTML 安全性。

HTML 元素事件处理函数

AIR 和 WebKit 中的 DOM 对象调度未包含在标准 DOM 事件模型中的某些事件。下表列出了为这些事件指定处理函数可使用的相关事件属性：

回调属性名称	说明
oncontextmenu	当调用上下文菜单时调用，例如通过右键单击或按住 Command 并单击所选文本。
oncopy	当复制元素中的所选内容时调用。
oncut	当剪切元素中的所选内容时调用。
ondominitialize	在创建加载到 frame 或 iframe 的文档的 DOM 之后以及在创建任何 DOM 元素或分析脚本之前调用。
ondrag	当拖动元素时调用。
ondragend	当释放拖动动作时调用。
ondragenter	当拖动手势进入元素范围时调用。
ondragleave	当拖动手势离开元素范围时调用。
ondragover	当拖动手势位于元素范围内部时持续调用。
ondragstart	当拖动手势开始时调用。
ondrop	当在元素上释放拖动手势时调用。
onerror	当在加载元素期间出错时调用。
oninput	当在表单元素中输入文本时调用。
onpaste	将项目粘贴到元素中时调用。
onscroll	当滚动可滚动元素的内容时调用。
onselectstart	当开始选择时调用。

HTML contentEditable 属性

您可以向任何 HTML 元素添加 contentEditable 属性，以便允许用户编辑该元素的内容。例如，以下 HTML 示例代码将除第一个 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>

注：如果将 document.designMode 属性设置为 on ，则该文档中的所有元素都是可编辑的，而不管各元素的 contentEditable 设置如何。但是，将 designMode 设置为 off 不会禁用对 contentEditable 为 true 的元素的编辑。有关其他信息，请参阅 Document.designMode 属性。

Data: URL

AIR 支持下列元素的 data: URL：

img
input type=”image”
CSS 规则，允许使用图像（例如，背景图像）

数据 URL 允许您将二进制图像数据作为 Base64 编码的字符串直接插入到 CSS 或 HTML 文档。以下示例使用 data: URL 作为重复的背景：

<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 时，一定要注意多余的空格。例如，数据字符串必须作为单一、完整的行输入。否则，换行符将被视为数据的一部分，并且无法解码图像。