非アプリケーションの HTML サンドボックスでのファイルドロップの処理

Adobe AIR 1.0 およびそれ以降

AIR アプリケーションにファイルをドラッグしたときに生成される File オブジェクトに、非アプリケーションのコンテンツからアクセスすることはできません。また、これらの File オブジェクトのいずれかをサンドボックスブリッジ経由でアプリケーションコンテンツに渡すこともできません(オブジェクトのプロパティには、直列化時にアクセスする必要があります)。ただし、HTMLLoader オブジェクトの AIR nativeDragDrop イベントをリッスンすることで、この場合でもアプリケーションにファイルをドロップできます。

ユーザーが非アプリケーションのコンテンツをホストするフレームにファイルをドロップした場合、通常、ドロップイベントは子から親へと伝達されません。ただし、HTMLLoader(AIR アプリケーション内のすべての HTML コンテンツのコンテナ)によって送出されたイベントは HTML イベントフローの一部ではないため、アプリケーションコンテンツのドロップイベントを受け取ることは可能です。

親ドキュメントでは、ファイルドロップイベントを受け取るために、 window.htmlLoader によって提供された参照を使用して、HTMLLoader オブジェクトにイベントリスナーを追加します。

window.htmlLoader.addEventListener("nativeDragDrop",function(event){ 
    var filelist = event.clipboard.getData(air.ClipboardFormats.FILE_LIST_FORMAT); 
    air.trace(filelist[0].url); 
});

NativeDragEvent オブジェクトは、対応する HTML イベントと同様に動作します。ただし、両者の間では、一部のプロパティとメソッドの名前およびデータ型が異なります。例えば、HTML イベントの dataTransfer プロパティは、ActionScript イベントの clipboard プロパティと同じ目的に使用されます。これらのクラスの使用について詳しくは、「 Adobe ActionScript 3.0 開発ガイド 」および「 Adobe Flash Platform 用 ActionScript 3.0 リファレンスガイド 」を参照してください。

次の例では、リモートサンドボックス(http://localhost/)に子ページを読み込む親ドキュメントを使用しています。親ドキュメントでは、HTMLLoader オブジェクトの nativeDragDrop イベントをリッスンし、ファイルの URL をトレースします。

<html> 
<head> 
<title>Drag-and-drop in a remote sandbox</title> 
<script language="javascript" type="text/javascript" src="AIRAliases.js"></script> 
<script language="javascript"> 
    window.htmlLoader.addEventListener("nativeDragDrop",function(event){ 
        var filelist = event.clipboard.getData(air.ClipboardFormats.FILE_LIST_FORMAT); 
        air.trace(filelist[0].url); 
    }); 
</script> 
</head> 
<body> 
       <iframe src="child.html" 
               sandboxRoot="http://localhost/"  
               documentRoot="app:/"  
               frameBorder="0"  width="100%" height="100%"> 
       </iframe> 
</body> 
</html>

子ドキュメントでは、HTML dragenter および dragover のイベントハンドラーで Event オブジェクトの preventDefault() メソッドを呼び出すことで、有効なドロップターゲットを提供する必要があります。そうしないとドロップイベントが発生しません。

<html> 
<head> 
    <title>Drag and drop target</title>             
    <script language="javascript" type="text/javascript"> 
        function preventDefault(event){ 
            event.preventDefault(); 
        } 
    </script> 
</head> 
<body ondragenter="preventDefault(event)" ondragover="preventDefault(event)">  
<div> 
<h1>Drop Files Here</h1> 
</div> 
</body> 
</html>