AdobeAIRでのHTML

Last-modified: 2014-01-25 (土) 23:50:52

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>

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

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

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

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

data: URL

AIR は、次のエレメントの data: URL をサポートしています。

  • img
  • input type="image"
  • CSS ルールで許可されているイメージ（background-image など）

data: URL を使用すると、CSS または HTML ドキュメントにバイナリイメージデータを直接 base64 エンコード文字列として挿入できます。次の例では、data: URL を繰り返す背景として使用しています。

 <html>
 <head>
 <style>
 body {
 background-
 background-repeat:repeat;
 }
 </style>
 </head>
 <body>
 </body>
 </html>

data: URL を使用するときは、空白の有無に意味があることに留意してください。例えば、データ文字列は改行されていない単一行として入力する必要があります。改行すると、改行がデータの一部として処理され、イメージがデコードされません。

奥付

このページはAdobe AIRの 公式ヘルプ を直接引用した文書です。CC BY-NC-SAのライセンスに従い、引用元の明示を行います。