HTML の拡張機能

目次 [非表示]

HTML の frame エレメントと iframe エレメント
HTML の Canvas エレメント
HTML エレメントのイベントハンドラ
HTML の contentEditable 属性

AIR および WebKit では、次に示す、非標準の HTML エレメントと属性を定義します。

HTML の frame エレメントと iframe エレメント

AIR では、アプリケーションサンドボックス内のコンテンツの frame エレメントと iframe エレメントに新しい属性を追加します。

sandboxRoot 属性

sandboxRoot 属性は、フレームの src 属性で指定されているファイルの元の場所の代わりとなる非アプリケーションドメインを指定します。ファイルは、指定したドメインに対応する非アプリケーションサンドボックスに読み込まれます。ファイル内のコンテンツと、指定したドメインから読み込まれたコンテンツでは、互いにクロススクリプトできます。

重要： sandboxRoot の値をドメインのベース URL に設定すると、そのドメインからのコンテンツに対するすべての要求は、リモートサーバではなく、アプリケーションディレクトリから読み込まれます（その要求が、ページナビゲーション、XMLHttpRequest、コンテンツを読み込むその他の手段のいずれによって発生したかは関係ありません）。

documentRoot 属性

documentRoot 属性は、sandboxRoot で指定されている場所にあるファイルに解決される URL の読み込み元となるローカルディレクトリを指定します。

フレームの src 属性またはフレームに読み込まれたコンテンツのいずれかで、URL を解決するとき、sandboxRoot で指定されている値に一致する URL の部分は、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 属性

フレーム内のコンテンツで任意のリモートドメインに対する XMLHttpRequest を生成することを許可するには、フレームの開始タグに allowCrossDomainXHR="allowCrossDomainXHR" を含めます。デフォルトでは、非アプリケーションコンテンツは、元の個々のドメインに対してのみこの要求を行うことができます。クロスドメイン 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/"/>

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 を local-with-file-system サンドボックスに配置します。

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

詳しくは、異なるセキュリティサンドボックス内のコンテンツのクロススクリプトおよび HTML セキュリティを参照してください。

HTML の Canvas エレメント

Webkit Canvas API で使用する描画領域を定義します。graphics コマンドをタグ自体で指定することはできません。キャンバスに描画するには、JavaScript を使用してキャンバスの描画メソッドを呼び出します。

<canvas id="drawingAtrium" style="width:300px; height:300px;"></canvas>

HTML エレメントのイベントハンドラ

AIR および Webkit の DOM オブジェクトは、標準の DOM イベントモデルにはないイベントを送出します。次の表に、これらのイベントのハンドラを指定するために使用できる、関連するイベント属性を示します。

コールバック属性名	説明
oncontextmenu	選択されたテキストでの右クリックまたはコマンドクリックなどによってコンテキストメニューが呼び出されるときに呼び出されます。
oncopy	エレメントでの選択内容がコピーされるときに呼び出されます。
oncut	エレメントでの選択内容がカットされるときに呼び出されます。
ondominitialize	フレームまたはインラインフレームに読み込まれたドキュメントの DOM が作成されるときに呼び出されます。ただし、DOM エレメントが作成されたり、スクリプトが解析されたりする前に呼び出されます。
ondrag	エレメントがドラッグされるときに呼び出されます。
ondragend	ドラッグが放されるときに呼び出されます。
ondragenter	ドラッグ操作がエレメントの境界に入るときに呼び出されます。
ondragleave	ドラッグ操作がエレメントの境界から出るときに呼び出されます。
ondragover	ドラッグ操作がエレメントの境界内にある間、連続して呼び出されます。
ondragstart	ドラッグ操作が開始されるときに呼び出されます。
ondrop	ドラッグ操作がエレメント上で放されるときに呼び出されます。
onerror	エレメントの読み込み中にエラーが発生したときに呼び出されます。
oninput	テキストがフォームエレメントに入力されるときに呼び出されます。
onpaste	アイテムがエレメントにペーストされるときに呼び出されます。
onscroll	スクロールできるエレメントのコンテンツがスクロールされるときに呼び出されます。
onsearch	エレメントがドラッグされるときに呼び出されます。
onselectstart	選択が開始されるときに呼び出されます。

HTML の contentEditable 属性

contentEditable 属性を任意の HTML エレメントに追加して、そのエレメントのコンテンツをユーザが編集できるようにすることができます。例えば、次の例の 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 プロパティを参照してください。