javascript - 点击后如何粘贴？它适用于谷歌文档

Question

我希望能够在用户点击时启动真正的粘贴事件。我可以理解这可能是一个安全问题，因为如果任何网页都可以访问用户剪贴板，那就太糟糕了。所以我认为所有浏览器都不允许访问剪贴板数据。

但是例如在谷歌文档中(在类似单词的应用程序中)，我可以从自定义上下文菜单粘贴(鼠标右键单击伪装成上下文菜单的 html 元素)，即使剪贴板数据已复制到不同的剪贴板Microsoft Paint 等应用程序。这适用于 Google Chrome 浏览器，这是我感兴趣的浏览器。

我以为他们是用 flash 做的，但它 仍然有效即使我完全禁用了 chrome 中的 flash。有一个 question关于这个已经，但那里提到的答案是不正确的。该问题的另一个答案表明谷歌为此使用了 chrome 扩展，但它 仍然有效即使我禁用了 chrome 中的所有扩展。

如何在windows中重现:

禁用 chrome 中的 flash，禁用所有扩展

重启

转到谷歌文档并打开新的空写作文档(文档，而不是电子表格)

在 Windows 中运行 microsoft paint 应用程序

在microsoftpaint里画东西，Ctrl+A全选，Ctrl+C复制

切换回 chrome 到 docs 空白页面，然后右键单击空白页面

从人工上下文菜单中选择粘贴(注意上下文菜单不是windows的原生菜单，而是来自google docs的html网页)

您将看到剪贴板图像已粘贴到 docs 文档 (!)

他们如何做到这一点？

如果用户在我的网页上按 Ctrl+V，我知道如何访问剪贴板数据，因为这会触发当前窗口上的粘贴事件。但是，我该怎么做 访问剪贴板数据或 开始粘贴实际剪贴板数据 (例如，在 mspaint 中复制的位图)在 javascript(或使用 jquery)中，而用户只需单击按钮或 div？

Answer 1

I want to be able to initiate real paste event when user clicks. I can understand this may be a security issue, because ...

以上是底线。。
拥有此代码 JS Fiddle

var Copy =  document.getElementById('copy'),
    Cut =  document.getElementById('cut'),
    Paste =  document.getElementById('paste');

// Checking Clipboard API without an action from the user
console.log('Copy:' + document.queryCommandSupported('copy'));
console.log('Cut:' + document.queryCommandSupported('cut'));
console.log('Paste:' + document.queryCommandSupported('paste'));


//Now checking the clipboard API upon a user action
Copy.addEventListener('click', function(){
    console.log('Copy:' + document.queryCommandSupported('copy'));
});

Cut.addEventListener('click', function(){
    console.log('Cut:' + document.queryCommandSupported('cut'));
});

Paste.addEventListener('click', function(){
    console.log('Paste:' + document.queryCommandSupported('paste'));
});

<button id="copy">Copy</button>
<button id="cut">Cut</button>
<button id="paste">Paste</button>

如果你用不同的浏览器检查它，你会发现浏览器对 Clipboard API 的 react 是不同的。使用 queryCommandSupported()结果是:
Chrome 47:

无需用户操作，复制: false , 切: false , 过去: false

使用用户操作，复制: true , 切: true , 粘贴: false

火狐 43:

无需用户操作，复制: true , 切: true , 过去: false

使用用户操作，复制: true , 切: true , 粘贴: false

IE11: - 我相信在 Edge 中也是如此

无需用户操作，复制: true , 切: true , 过去: true

使用用户操作，复制: true , 切: true , 粘贴: true

虽然所有选项都为真，但 IE 会要求用户对上述所有操作的权限。

Safari : - 与 iOS Safari 相同

仅在有效选择上触发复制事件，并且仅在聚焦的可编辑字段中剪切和粘贴。

仅通过快捷键读取/写入操作系统剪贴板，而不是通过 document.execCommand() .

浏览器对剪贴板 API 的详细支持 caniuse.com/#search=clip
浏览器还支持使用 conteneditable="true" 的右键单击上下文菜单进行粘贴。 JS Fiddle 2 中的元素

But for example in google docs (in the word-like application), I can Paste from custom context menu (right mouse click on a html element pretending to be a context menu), even if the clipboard data has been copied to clipboard in different application like Microsoft Paint.

I thought they do it using flash, but it still works even if I completely disable flash in chrome.

来自 Google Apps Script documentation for developing add-ons for Google Apps :" 平台: Apps Script 的代码编辑器是您从 Google 表格、文档或表单中启动的网络应用程序。该语言基于 JavaScript，but executes on Google's servers rather than directly in the user's browser(客户端除外用户界面...”。
由于它是在他们的服务器上执行的，我认为他们可以启用某些功能，甚至使用 Java，以获得更好的体验。

编辑 1:
如果您查看 clipboard.js ，您会看到该库没有“粘贴”选项，只有“复制”和“剪切”，同样在页面末尾的“浏览器支持”部分中，您会看到该库依赖于execCommand API，并且在 Safari 中不起作用。

编辑 2:
在更新问题和评论后，对于 Google 文档部分，我按下 Prt Sc 在剪贴板中截屏，在 Chrome 中打开 Google 文档，右键单击然后单击自定义上下文中的“粘贴”菜单并确保它有效，在 Firefox 中打开 Google 文档，然后单击“粘贴”选项，我得到了 this response

另外作为记录，我尝试在 IE11 中执行相同的操作，并且自 21 分钟以来它仍在尝试启动 Google 文档。
所以结论可能是，而且大多数情况下，“谷歌”Chrome 有一个 。异常(exception): - 类似于条件语句 - 对于浏览器中的“Google”文档和其他 Google 服务，我也认为 @julien-gregoire关于它是 Firefox 的扩展是正确的。
来自 this Google docs support page :

For security reasons, most browsers don't allow web apps like Docs, Sheets, and Slides to use your computer's clipboard through menus.

However, if you use Chrome, you can give permission to access your clipboard by installing the Google Drive Chrome app. This allows you to use the right-click menu to copy and paste content (or select "Copy" or "Paste" from the Edit menu in the toolbar). To install the app, visit the Chrome Web Store.

和this smallbusiness page :

Without keyboard shortcuts, you have two more options for copying and pasting: either going to the "Edit" menu and selecting "Copy" or "Paste," or right-clicking in the document and selecting either "Copy" or "Paste" from the context menu. In Google Docs, both these options are only available to Chrome users who have the Google Drive Web app installed. The app is free, but is not available for other browsers.

因此，他们似乎已经将该应用程序实现为新版本 Chrome 中的内置功能。