Функция ClipboardItem.supports() теперь является базовой. Недавно доступна.

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Thomas Steiner

Опубликовано: 30 апреля 2025 г.

Праздник: эта веб-функция теперь доступна во всех трех основных браузерных движках и станет базовой версией с 30 марта 2025 года.

API Async Clipboard сделал работу с буфером обмена намного проще, чем раньше. Вместо предыдущих методов управления буфером обмена теперь вы можете вызывать navigator.clipboard.writeText() для обычного текстового содержимого или navigator.clipboard.write() для «почти» всего остального, например изображений, текстового содержимого или HTML.

Однако до сих пор недоставало одной детали — количественной оценки «почти». Например, вы не могли знать, поддерживает ли API SVG, пока не попробовали, а затем, в случае отсутствия поддержки, перехватили возникшее исключение. Это был не очень эргономичный способ определения поддержки, поэтому была указана статическая функция ClipboardItem.supports() .

Теперь функция достигла статуса Baseline Newly Available, что означает, что работа с буфером обмена становится еще лучше. Чтобы узнать, поддерживает ли браузер данный формат, передайте в функцию 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."

Но, используя пользовательские веб-форматы, вы можете работать с изображениями AVIF, а также свободно копировать и вставлять их, если принимающая сторона также знает, как обращаться с пользовательским веб-форматом.

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() теперь вы можете правильно определить ситуацию с поддержкой буфера обмена для пользовательского веб-формата и убедиться, что она работает.

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() Baseline веб-разработчики могут надежно определять поддержку буфера обмена для различных типов MIME, включая пользовательские веб-форматы. Это улучшение делает работу с буфером обмена более надежной и предсказуемой, улучшая взаимодействие с пользователем во всех браузерах.