javascript 剪切/复制/粘贴到剪贴板 : how did Google solve it?

Question

是的，这个问题已经被问了一遍又一遍:如何使用 JavaScript 从系统剪贴板复制粘贴到系统剪贴板？到目前为止，我只找到了部分解决方案和技巧。过去经常被问到的原因是仍然没有可行的解决方案。然而，我看到 Google 文档现在实际上针对键盘事件和按钮都有一个有效的解决方案。所以，这是可能的，但是他们是如何做到的呢？软件沙拉文章，Accessing the System Clipboard with JavaScript – A Holy Grail? ，很好地概述了这个问题(但已经有几年了)。

简而言之:

• 您可以使用键盘事件 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/

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

您可以使用非常简单的 list 文件为自己创建这样的应用程序(详细信息此处 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"
    ]
}

此处的“权限”字段启用剪贴板操作。

现在，当您启用此功能时，您可以执行 document.execCommand('copy') 并且它将起作用(将返回 true)。但这还不是全部 - Chrome 中的 document.execCommand('copy') 会触发复制事件，您可以使用用于捕获键盘剪贴板快捷方式的相同代码来捕获它。现在 Google 已经做到了。

当然，此描述仅适用于 Chrome。