时间戳

首页 > 解决方案 > 如何从 JavaScript 中获取复制的文本

javascript - 如何从 JavaScript 中获取复制的文本

问题描述

这个问题与我提出的另一个问题有关，但我意识到该问题中的一个附带问题值得提出自己的问题。

使用 JavaScript，我想看看用户从网页上复制了什么。用户粘贴时读取剪贴板内容相当容易：

document.addEventListener("paste", e => {
  let text = e.clipboardData.getData("text");
  alert("pasting text: " + text);
});

这正确地创建了一个带有刚刚粘贴的警报的警报。但是，当用户复制时，获取剪贴板数据更加​​困难。

方法一（无效）

document.addEventListener("copy", e => {
  let text = e.clipboardData.getData("text");
  alert("copying text: " + text);
});

这会提醒“正在复制数据：”，但后面没有文字。那是因为该getData方法正在返回""（空字符串）。我的理解是，当您执行粘贴以外的任何操作时，网站读取剪贴板会被认为是一个安全问题。

方法 2（有效，但有弹出窗口）

document.addEventListener("copy", () => {
  navigator.clipboard.readText().then(text => alert("copied text: " + text));
});

这可行，但在发出警报之前，它会创建一个弹出窗口，要求该站点允许读取剪贴板。我宁愿没有这个弹出窗口。

方法3（似乎有效，但似乎不对）

document.addEventListener("copy", () => {
  let text = window.getSelection().toString();
  alert("copying text: " + text);
});

这似乎做我想要的。允许这样做似乎很奇怪，但方法 1 不允许。

我有一些问题：

  1. 如果方法 3 允许，为什么不允许方法 1？似乎方法 1 可以提供与方法 3 相同的信息，而且会更方便和安全。
  2. 在任何情况下，方法 3 会提供与方法 2 不同的结果（就text变量而言，而不是弹出行为）？
  3. 使用我没有考虑的方法 3 是否还有其他缺点？

在这一点上，我只关心 Google Chrome 或 Chromium 上下文中的这些答案，而不是其他浏览器。任何这些问题的答案将不胜感激。

标签： javascriptcopyclipboard

解决方案

tl;dr如果您真的认为对用户不诚实您正在做的事情是合理的，请使用方法 3 - 这是一个很好的解决方法，尽管许多人可能认为这是一种利用。

查看 W3 规范（https://www.w3.org/TR/clipboard-apis/#Cases），我们可以看到为什么这些事件（以及仍在开发的 API）首先存在的一些见解。具体来说，copy您可以在目标不是用户实际希望在剪贴板上结束的情况下更改paste复制的内容，同时让您可以处理将数据传输到应用程序中。

知道了这一点，我们可以得出一些结论：

  • 方法 1：规范没有详细介绍剪贴板的安全性，只是表示实现应该能够保护用户。因此，我对复制的数据对您隐藏并不感到惊讶。这似乎是实施者的明智决定。更重要的是，看看规范规定的算法，很可能剪贴板中还没有数据，因为这个事件的目的是让你设置应该结束的内容。
  • 方法2：这似乎更像是作者的意图。如果应用程序要访问剪贴板，它应该真正获得用户的许可。特别是因为剪贴板可能包含来自页面外部的数据。
  • 方法3：这是一种利用，但很难看到它不起作用的情况。从实现者的角度来看，很难阻止——因为他们必须检查事件委托函数的调用；与“不让数据随时可用”相比。可以说，它也足够安全，因为您可以访问的唯一信息是您自己的文档中已经存在的信息。

推荐阅读