비 응용 프로그램 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); 
});

다음 예제에서는 원격 샌드박스로 자식 페이지를 로드하는 부모 문서를 사용합니다(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>