javascript剪切/复制/粘贴到剪贴板:谷歌是如何解决它的？

Question

是的,这个问题一再被问到:如何使用javascript从系统剪贴板复制和粘贴到系统剪贴板？到目前为止,我发现只有部分解决方案和黑客攻击.之前经常被问到的原因是仍然没有可行的解决方案.但是,我看到Google Docs现在实际上有一个适用于键盘事件和按钮的工作解决方案.所以,这是可能的,但他们是如何做到的？软件沙拉文章,使用JavaScript访问系统剪贴板 - 圣杯？,给出了一个很好的问题概述(但它已经有几年了).

简而言之:

• 您可以使用键盘事件ctrl + x,ctrl + c,ctrl + v来复制带有准备数据的隐藏文本区域中的文本,或者在隐藏字段中捕获粘贴文本然后使用它执行某些操作

• 您可以通过Flash或Java Applet使用一些黑客将某些内容复制到系统剪贴板,而无需用户批准.

• 你可以使用一个"真实"的解决方案,其中包含用于IE的clipboardData.setData和用于其他浏览器的execCommand,这取决于用户的批准.

知道Google如何解决剪贴板问题吗？

Answer 1

我知道很久以前就发布了这个问题,但是我需要检查谷歌是如何做到这一点的,所以也许有人会发现它很有用.

实际上谷歌也使用系统剪贴板,但它有点棘手.如果您使用键盘快捷键,您可以在例如窗口上捕获复制/粘贴/剪切事件:

window.addEventListener('copy', function (ev) {
    console.log('copy event');
    // you can set clipboard data here, e.g.
    ev.clipboardData.setData('text/plain', 'some text pushed to clipboard');
    // you need to prevent default behaviour here, otherwise browser will overwrite your content with currently selected 
    ev.preventDefault();
});

键盘快捷键的实例:http://jsfiddle.net/tyk9U/

不幸的是,这只是键盘快捷键的解决方案,并且上下文菜单存在问题,因为如果没有本机(可信)复制/剪切/粘贴事件,您将无法访问剪贴板数据.但谷歌做了有趣的伎俩.有API document.execCommand()允许您运行contenteditable元素的命令,并且有一个命令'copy',你可以通过它来触发它document.execCommand('copy').但是当您在Chrome中的控制台中尝试此操作时,它将返回false.我花了一些时间来调查这一点,结果发现他们安装了Chrome扩展程序,名为"Google云端硬盘"(转到chrome:// apps /,你可以在那里看到它),可以为域名drive.google启用剪贴板访问. com和docs.google.com.打开一些文档或电子表格并输入控制台document.execCommand('copy')- 它将返回true.卸载扩展时,您将无法使用上下文菜单中的剪贴板操作.

你可以用很简单的清单文件为自己创造这样的应用程序(这里的细节https://developer.chrome.com/apps/first_app):

{
    "manifest_version": 2,
    "name": "App name",
    "description": "App description",
    "version": "1.0",
    "app": {
        "urls": [
            "http://your.app.url.here/"
        ],
        "launch": {
            "web_url": "http://your.app.url.here/"
        }
    },
    "icons": {
        "128": "x-128.png"
    },
    "permissions": [
        "clipboardRead",
        "clipboardWrite"
    ]
}

"permissions"字段可以启用剪贴板操作.

现在当你启用此功能时,你可以做到document.execCommand('copy')并且它会工作(将返回true).但这不是一切 - document.execCommand('copy')在chrome触发器复制事件中,您可以使用与捕获键盘剪贴板快捷方式相同的代码来捕获它.这是谷歌现在做到的.

当然,此说明仅适用于Chrome.

Answer 2

[ 注意:这个答案在编写时是准确的,并正确回答了OP的问题.但是,技术从那时起就发生了变化; 如果您有兴趣在您的网络应用程序中支持复制和粘贴,请在此页面上查看其他更近期的答案.-ruakh]

但是,我看到Google Docs现在实际上有一个适用于键盘事件和按钮的工作解决方案.

不,它没有.并不是的.对于键盘事件,Google Docs不做任何事情; 它只是不会阻止浏览器的默认复制粘贴功能; 因此,用户可以自由地复制和粘贴,而不会影响Google Docs.对于按钮,Google文档不支持系统剪贴板,但它自己的"网络剪贴板"完全在Google文档中.您无法使用工具栏按钮将文本复制粘贴到计算机上的其他程序中,也无法粘贴从计算机上的其他程序复制的文本.

有关此内容的详细信息,请参阅"在Google文档中复制和粘贴".(这是面向用户的,而不是面向开发人员的,但它确实能够明确表示支持和支持的内容.)