JavaScript: 我怎样才能有一个不断的运行进程来进行监控？

Question

我是 JavaScript 的新手，我不太确定如何实现。我正在使用剪贴板 API (https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) 从用户的剪贴板中读取文本。我希望用户当前在其剪贴板上的任何内容都显示在页面上。

我可以做一次性粘贴就好了，但我不确定如何将其变成一个持续运行的过程。我计划间歇性地检查用户的剪贴板以查看内容是否已更改，如果已更改，则将其粘贴到页面。只要 HTML 页面打开，我就希望发生这种情况。这可能吗？

JavaScript 似乎不喜欢 while(true) 循环，因为每当我尝试该页面 crashed/become 没有响应时。

Answer 1

您可以设置一个 eventListener 来持续监听 copy 事件，我想这会满足您的要求。每次用户复制内容时，您都可以为要显示复制内容的区域连续触发更新。这当然需要在用户进入页面时进行第一次读取，看当时剪贴板中是否有任何内容。检查后立即设置事件侦听器。

来自 MDN：

source.addEventListener('copy', (event) => {
    const selection = document.getSelection();
    event.clipboardData.setData('text/plain', selection.toString().toUpperCase());
    event.preventDefault();
});

信息：https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event

Answer 2

您可以监听 copy 事件，当该事件被触发时，您就知道用户已经从页面复制了一些内容。

对于其他地方发生的剪贴板更改，您可以在 window 上监听 onfocus 事件，然后检查剪贴板更改。

在您 window 失去焦点的情况下无法在另一个 app/webpage 中复制。

如果这不起作用，您可以使用 setInterval(..) 而不是无限循环。

这是一个例子：

let prevClipText;

setInterval(() => {
  navigator.clipboard.readText().then(clipText => {
    if (clipText !== prevClipText) {
      console.log('clipboard content was changed to:', clipText);
      prevClipText = clipText;
    }
  });
}, 500);

JavaScript: 我怎样才能有一个不断的运行进程来进行监控？

JavaScript: how can I have a constantly running process for the purpose of monitoring?

javascript

clipboard