2015-12-07 30 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