Три способа копирования содержимого страницы с помощью JavaScript (обмен сводкой)

Существует множество сторонних плагинов, которые могут реализовать функцию копирования, но если мы сделаем это сами, знаем ли мы, как это реализовать?

В этой статье представлены три варианта реализации.

Метод 1. API асинхронного буфера обмена.

Использование API асинхронного буфера обмена.

Этот метод является самым простым в использовании, но совместимость не очень хорошая, и существует множество требований.

Пример кода:

const Promise = navigator.clipboard.writeText(newClipText);

Обратите внимание, что возвращаемое значение метода — Promise. И при использовании этого метода страница должна быть в фокусе, иначе будет выдано сообщение об ошибке.

Метод 2: API Document.execCommand

использует Document.execCommand.

Хотя этот метод заброшен и больше не является веб-стандартом, на него влияет множество исторических факторов, и я уверен, что браузеры будут поддерживать его еще долгое время.

Скопировать содержимое элемента DOM

<p id="content">123456</p>
<button id="copyButton">Копировать</button>

При копировании элементов DOM необходимо дополнительно использовать API выбора и API диапазона.

Developer.mozilla.org/en-US/docs/…

Developer.mozilla.org/en-US/docs/…

Пример кода:

const copyButton = document.getElementById('copyButton');
const content = document.getElementById('content');
copyButton.addEventListener('click', function () {
  константный выбор = window.getSelection();
  константный диапазон = document.createRange();
  //Установим выбранный диапазон содержимого.selectNodeContents(content);
  // Очищаем выделениеselection.removeAllRanges();
  //Добавляем выбранный контент choice.addRange(range);
  document.execCommand('копировать');
});

Сначала необходимо очистить выделение, а затем добавить диапазон.

Здесь возникает проблема с деталями. После нажатия кнопки копирования скопированный контент выбирается, что немного неожиданно.

Решение состоит в том, чтобы вызвать selection.removeAllRanges() после завершения копирования, чтобы очистить выделение.

Рассмотрим другую ситуацию, когда пользователь выбирает часть страницы перед ее копированием. После завершения копирования, помимо очистки выбранного содержимого копии, вам также необходимо восстановить содержимое, выбранное пользователем перед копированием.

Код реализации следующий:

const copyButton = document.getElementById('copyButton');
const content = document.getElementById('content');
copyButton.addEventListener('click', function () {
  константный выбор = window.getSelection();
  константный диапазон = document.createRange();
  //Кэшируем контент, выбранный пользователем const currentRange =
    выбор.rangeCount === 0 ноль: выбор.getRangeAt(0);
  //Устанавливаем фрагмент документа range.selectNodeContents(content);
  // Очищаем выделениеselection.removeAllRanges();
  //Устанавливаем фрагмент документа как выбранный контент choice.addRange(range);
  пытаться {
    // Копируем в буфер обмена document.execCommand('copy');
  } поймать (ошибиться) {
    // Подскажите, что копирование не удалось}finally {
    выбор.removeAllRanges();
    если (currentRange) {
      //Восстанавливаем выбранный пользователем контент choice.addRange(currentRange);
    }
  }
});

Сначала кэшируйте выбранный пользователем контент, а затем восстанавливайте его после завершения копирования.

Скопируйте содержимое элемента ввода

и используйте метод select объекта элемента ввода, чтобы выбрать содержимое. Нет необходимости создавать фрагмент диапазона для установки выбранного содержимого.

Пример кода:

const copyButton = document.getElementById('copyButton');
const inputEl = document.getElementById('input');
copyButton.addEventListener('click', function () {
  константный выбор = window.getSelection();
  константный текущий диапазон =
    выбор.rangeCount === 0 ноль: выбор.getRangeAt(0);
  //Выбираем входной контент inputEl.select();
  //Копируем в буфер обмена try {
    document.execCommand('копировать');
  } поймать (ошибиться) {
    // Подскажите, что копирование не удалось // . . .
  } окончательно {
    выбор.removeAllRanges();
    если (currentRange) {
      //Восстанавливаем выбранный пользователем контент choice.addRange(currentRange);
    }
  }
});

Нажатие кнопки копирования также не приведет к удалению ранее выбранного содержимого.

Способ 3: перезаписать событие копирования

w3c.github.io/clipboard-a…

В качестве примера процитируйте фрагмент кода из приведенной выше ссылки:

// Перезапишите то, что копируется в буфер обмена.
document.addEventListener('copy', function (e) {
  // e.clipboardData изначально пуст, но мы можем установить для него значение
  // данные, которые мы хотим скопировать в буфер обмена.
  e.clipboardData.setData('text/plain', 'Яичница в стиле вестерн');
  // Это необходимо для того, чтобы текущий выбор документа не
  // записывается в буфер обмена.
  е.preventDefault();
});

Скопируйте любой контент на странице и вставьте выходной контент: «Яичница в стиле вестерн».