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 特質可為 frame src 特質所指定的檔案指定替代的非應用程式來源網域。檔案將會載入到與指定網域相對應的非應用程式安全執行程序中。檔案中的內容和載入自指定網域的內容能夠彼此進行跨指令碼處理。

重要事項：如果您將 sandboxRoot 值設定為網域的基底 URL，所有向該網域發出的內容要求將從應用程式目錄載入，而不是從遠端伺服器載入 (不論要求是因進行頁面瀏覽、XMLHttpRequest 或以任何其它方式載入內容所引起)。

documentRoot 特質

documentRoot 特質指定將從哪個本機目錄載入 URL，以供解析成 sandboxRoot 所指定位置內的檔案。

解析 URL (指定於 frame 的 src 特質或是載入至頁框的內容中) 時，URL 中與 sandboxRoot 指定值相符的部分將以 documentRoot 指定的值取代。因此，如下列頁框標籤所示：

<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。再者，亦應仔細驗證頁面所載入的一切外部資料，以防程式碼插入攻擊或其它形式的攻擊。

重要事項： frame 或 iframe 元素一旦加入 allowCrossDomainXHR 特質，跨網域 XHR 便會啟用 (除非指定值為 "0" 或以字母 "f" 或 "n" 開頭)。例如，將 allowCrossDomainXHR 設定為 "deny" 仍會啟用跨網域 XHR。 如果您不想啟用跨網域要求，請勿在元素宣告中加入此特質。

ondominitialize 特質

為頁框的 dominitialize 事件指定事件處理常式。此事件是 AIR 專屬的事件，將於建立頁框的視窗及文件物件後、尚未剖析任何指令碼或建立文件元素之前觸發。

頁框會在載入過程中及早傳送 dominitialize 事件，讓子頁面中的任何指令碼能夠參考由 dominitialize 處理常式加到子文件的物件、變數和函數。父頁面必須與子文件位於相同的安全執行程序，才能直接在子文件中加入或存取任何物件。不過，應用程式安全執行程序中的父系可藉由建立安全執行程序橋接，與非應用程式安全執行程序中的內容進行通訊。

下列範例會說明 iframe 標籤在 AIR 中的用法：

將 child.html 放入遠端安全執行程序，且不要對應到遠端伺服器上的實際網域：

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

將 child.html 放入遠端安全執行程序，只允許向 www.example.com 發出 XMLHttpRequest：

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

將 child.html 放入遠端安全執行程序，允許向任何遠端網域發出 XMLHttpRequest：

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

將 child.html 放入遠端安全執行程序，使用 dominitialize 事件建立安全執行程序橋接：

<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 規則允許的影像 (例如背景影像)

Data URL 可讓您將二進位影像資料直接插入至 CSS 或 HTML 文件，做為 base64 編碼字串。下列範例使用 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 時，請注意額外空白十分重要。例如，資料字串必須輸入為單一未中斷行。否則，斷行符號會視為資料的一部分，而且影像會無法解碼。