如何使用剪贴板 API 在页面加载时读取剪贴板内容？

如何在页面加载时检索剪贴板内容

Web 浏览器提供用于访问剪贴板的 API，使您能够在页面上检索其内容无需用户交互即可加载。此功能对于预填充文本字段或显示剪贴板数据等任务特别有用。

使用剪贴板 API

剪贴板 API (navigator.clipboard) 提供了方法称为 readText()。顾名思义，它允许您从剪贴板读取当前文本内容。

您可以通过两种方式使用此 API：异步/等待语法或 Promise 语法。

使用 Async/Await 语法：

<code class="javascript">const text = await navigator.clipboard.readText();</code>

使用 Promise 语法：

<code class="javascript">navigator.clipboard.readText()
  .then(text => {
    console.log('Pasted content: ', text);
  })
  .catch(err => {
    console.error('Failed to read clipboard contents: ', err);
  });</code>

权限请求

需要注意的是，这个API会提示用户一个权限请求对话框。这可确保恶意脚本在未经用户同意的情况下无法访问剪贴板数据。

限制和解决方法

从版本 109 开始，剪贴板 API 无法在 Firefox 中运行。如果您需要支持 Firefox 用户，可以考虑使用第三方剪贴板库。

要从控制台运行 API 代码，可以使用超时并快速单击网站窗口。

<code class="javascript">setTimeout(async () => {
  const text = await navigator.clipboard.readText();
  console.log(text);
}, 2000);</code>

其他资源

有关更多信息和使用指南，请参阅以下 Google 开发者文档：

• [剪贴板 API](https:// /developer.mozilla.org/en-US/docs/Web/API/Clipboard_API)
• [规范](https://w3c.github.io/clipboard-apis/)

以上是如何使用剪贴板 API 在页面加载时读取剪贴板内容？的详细内容。更多信息请关注PHP中文网其他相关文章！