简介
在本实验中，我们将探索 JavaScript 中的剪贴板 API，并学习如何将文本异步复制到剪贴板。你将学习如何检查该 API 的可用性，并使用它将文本写入剪贴板。在本实验结束时，你将对如何在 JavaScript 应用程序中使用剪贴板 API 有扎实的理解。
将字符串复制到剪贴板的函数
要将字符串复制到剪贴板，请使用 copyToClipboardAsync 函数。该函数返回一个 Promise，当剪贴板内容更新时它会被 resolve。以下是步骤：
- 通过使用
if语句检查Navigator、Navigator.clipboard和Navigator.clipboard.writeText是否为真值，来判断剪贴板 API 是否可用。 - 如果剪贴板 API 可用，使用
Clipboard.writeText()将给定的值str写入剪贴板。 - 返回
Clipboard.writeText()的结果，这是一个 Promise，当剪贴板内容更新时它会被 resolve。 - 如果剪贴板 API 不可用，使用
Promise.reject()以适当的错误消息拒绝该 Promise。 - 如果你需要支持旧版浏览器，请使用
Document.execCommand()代替Clipboard.writeText()。你可以在copyToClipboard代码片段中了解更多相关信息。
以下是 copyToClipboardAsync 函数：
const copyToClipboardAsync = (str) => {
if (navigator && navigator.clipboard && navigator.clipboard.writeText) {
return navigator.clipboard.writeText(str);
}
return Promise.reject("The Clipboard API is not available.");
};
要使用该函数，将你想要复制的字符串作为参数调用 copyToClipboardAsync，如下所示：
copyToClipboardAsync("Lorem ipsum"); // 'Lorem ipsum' 已复制到剪贴板。
总结
恭喜你！你已经完成了“异步复制到剪贴板”实验。你可以在 LabEx 中练习更多实验来提升你的技能。