2015-12-07 28 views
2

是否可以實現CF_HDROP從瀏覽器拖放到另一個程序中?我希望能夠使用JavaScript網站來組織,搜索和服務本地服務器上的另一個程序內容的目錄。Javascript CF_HDROP實施

雖然我找到了一種方法從瀏覽器拖放到桌面或其他文件夾下載。我還沒有找到一種方法來充當CF_HDROP剪貼板格式。我的直覺是,這是不可能的瀏覽器中的JavaScript的沙盒,但我敢肯定有人比我更聰明可以證實這一點。

+0

什麼是「CF_HDROP」? – j08691

+0

您指的是:https://msdn.microsoft.com/en-us/library/windows/desktop/bb776902(v=vs.85).aspx Shell剪貼板格式用於標識正在傳輸的Shell數據的類型通過剪貼板 –

+0

正確,我指的是剪貼板的Shell格式。我應該包括那個鏈接。 https://msdn.microsoft.com/en-us/library/windows/desktop/bb776902(v=vs.85).aspx#CF_HDROP –

回答

1

我最近幾天也在找同樣的問題,DnD functionality in HTML5有一些用setData()函數處理剪貼板數據的函數。雖然當你想要在瀏覽器中獲得某些東西時它運行良好,但是當我嘗試時,setData在每個瀏覽器中的工作方式都不相同,很可能是出於安全原因。

我用ClipSpy檢查剪貼板數據,並用此HTML/JS:

<!DOCTYPE html> 
<html> 
<head> 
<title>Welcome to nginx!</title> 
<style> 
    body { 
     width: 35em; 
     margin: 0 auto; 
     font-family: Tahoma, Verdana, Arial, sans-serif; 
    } 
</style>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
</head> 
<body> 
<div id="drag1" draggable="true"> 
<h1>Welcome to nginx!</h1> 
<p>If you see this page, the nginx web server is successfully installed and 
working. Further configuration is required.</p> 

<p>For online documentation and support please refer to 
<a href="http://nginx.org/">nginx.org</a>.<br/> 
Commercial support is available at 
<a href="http://nginx.com/">nginx.com</a>.</p> 

<p><em>Thank you for using nginx.</em></p> 
</div> 
</body> 
</html> 

<script> 
document.getElementById('drag1').addEventListener('dragstart', function drag(ev) { 

    // Create data transfer facade so we can set custom data types (like 'commet'). 
    //ev.dataTransfer.setData("text/plain", ev.target.id); 
    ev.dataTransfer.setData("FileNameW", "\\fileserver\SampleVideo\Test.avi"); 
    ev.dataTransfer.setData("SomeData", "true"); 
    //ev.dataTransfer.setData("text/html", "<p>Example paragraph</p>"); 
    //ev.dataTransfer.setData("text/uri-list", "http://developer.mozilla.org"); 
    // Some text need to be set, otherwise drop event will not be fired. 

},false); 
</script> 

當檢查拖放從Chrome中我看到了我的所有數據進入「鉻網絡定製MIME數據格式」,而在Firefox數據按預期設置。 IE11根本沒有設置任何數據(還設置了untrusteddragdata)。

ClipSpy出從Chrome中: Chromium DragData

從Firefox ClipSpy出來: Firefox DragData

由於火狐似乎支持CF_HDROP在JavaScript中進行設置,我嘗試添加本地文件的路徑,所以當我將其拖到桌面將它複製到桌面。我無法做到這一點。

一邊想着如何做到這一點在Chrome我發現Chromium issues:

<html> 
<head> 
<title>Download drag-out test</title> 

<script type="text/javascript"> 

    function handleDragStart(evt) 
    { 
     var url = document.getElementById("downloadUrl").value; 
     if (url.length > 0) { 
      var parts = url.split("/"); 
      evt.dataTransfer.setData("DownloadURL", "application/octet-stream:" + parts[parts.length - 1] + ":" + url); 
     } 
    } 

    function init() 
    { 
     var download = document.getElementById("download"); 
     download.draggable = true; 
     download.ondragstart = handleDragStart; 
    } 

</script> 

</head> 

<body onload="init()"> 

Enter the file URL: <input id="downloadUrl" type="text" style="width: 500px;" value="http://www.google.com/favicon.ico" /><br /> 
<br /> 

<div id="download" style="width: 400px; border: 1px solid #000; background: #ccc; padding: 10px;">Drag this box out of the browser to download the file above</div> 

</body> 
</html> 

一個示例腳本,當我測試它在Chrome,它以某種方式轉化downloadUrl到CF_HDROP和下載鏈接中的文件。然而,它只使用鉻,我試圖找到它的文檔或使用本地文件或自定義數據的方式,但無論如何失敗。

+0

順便說一句,我的第二個腳本是這個樣本相同: http:// www .thecssninja.com/demo/gmail_dragout/ 此功能最有可能添加到鉻以啓用從Gmail到桌面的拖出附件。 – Nooneelse