ClipboardItem.supports() 函数现已成为基准版新功能

Thomas Steiner

发布时间：2025 年 4 月 30 日

庆祝：此 Web 功能现已在三大主要浏览器引擎中推出，并将于 2025 年 3 月 30 日成为“新推出”基准。

与以往相比，Async Clipboard API 让您可以更轻松地使用剪贴板。现在，您可以调用 navigator.clipboard.writeText() 来处理纯文本内容，调用 navigator.clipboard.write() 来处理“几乎”所有其他内容，例如图片、文本内容或 HTML。

不过，目前还缺少一个环节，那就是量化“几乎”的程度。例如，您无法知道 API 是否支持 SVG，除非您尝试使用，如果不支持，则捕获抛出的异常。这种确定支持情况的方式不太符合人体工学，因此指定了静态 ClipboardItem.supports() 函数。

该函数现已达到“新推出的基准版”状态，这意味着与剪贴板的互动体验变得更加出色。如需了解浏览器是否支持给定格式，请将您感兴趣的格式的 MIME 类型传递给该函数。

const format = 'image/svg+xml';
const supportsFormat = ClipboardItem.supports(format);
console.log(`This browser does${supportsFormat ? '' : ' not'} support ${format}.`);
// "This browser does support image/svg+xml."

以前，我写了“几乎”所有其他内容，而这正是最有趣的地方。借助网站自定义格式，您可以使用浏览器不原生支持的格式。例如，默认情况下，浏览器不支持 AVIF 图片。

const format = 'image/avif';
const supportsFormat = ClipboardItem.supports(format);
console.log(`This browser does${supportsFormat ? '' : ' not'} support ${format}.`);
// "This browser does not support image/avif."

不过，通过使用 Web 自定义格式，您可以处理 AVIF 图片并自由地复制和粘贴它们，前提是接收方也知道如何处理 Web 自定义格式。

const format = 'web image/avif';
const supportsFormat = ClipboardItem.supports(format);
console.log(`This browser does${supportsFormat ? '' : ' not'} support ${format}.`);
// "This browser does support web image/avif."

借助 ClipboardItem.supports() 函数，您现在还可以正确检测 Web 自定义格式的剪贴板支持情况，并确保其正常运行。

if (ClipboardItem.supports('web image/avif')) {
  // Fetch remote AVIF image and obtain its blob representation.
  const blob = await fetch('image.avif').then((response) => response.blob());

  try {
    // Write the image data to the clipboard, prepending the blob's actual
    // type (`"image/avif"` with the string `"web "`, so it becomes
    // `"web image/avif"`.
    const clipboardItem = new ClipboardItem({
      'web image/avif': blob,
    });
    await navigator.clipboard.write([clipboardItem]);
  } catch (err) {
    console.error(err.name, err.message);
  }
}

ClipboardItem.supports() 函数现已作为“新基准”版本提供，Web 开发者可以可靠地检测剪贴板对各种 MIME 类型（包括 Web 自定义格式）的支持。此增强功能可让剪贴板的使用更加稳健可靠，并改善所有浏览器中的用户体验。