Drei Möglichkeiten, Seiteninhalte mit JavaScript zu kopieren (Zusammenfassungsfreigabe)

Es gibt viele Plug-Ins von Drittanbietern, die die Kopierfunktion implementieren können. Wenn wir es jedoch selbst tun, wissen wir dann, wie wir es implementieren?

In diesem Artikel werden drei Implementierungsoptionen vorgestellt.

Methode 1: Async Clipboard API

mithilfe der Async Clipboard API

Diese Methode ist am einfachsten zu verwenden, aber die Kompatibilität ist nicht sehr gut und es gibt viele Anforderungen.

Beispielcode:

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

Beachten Sie, dass der Rückgabewert der Methode ein Promise ist. Und bei dieser Methode muss die Seite im Fokus sein, sonst wird ein Fehler gemeldet.

Methode 2: Die Document.execCommand-API

verwendet Document.execCommand.

Obwohl diese Methode aufgegeben wurde und kein Webstandard mehr ist, gibt es viele historische Faktoren und ich glaube, dass Browser sie noch lange unterstützen werden.

Kopieren Sie den Inhalt des DOM-Elements

<p id="content">123456</p>
<button id="copyButton">Kopieren</button>

Beim Kopieren von DOM-Elementen müssen Sie zusätzlich die Auswahl-API und die Range-API verwenden.

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

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

Beispielcode:

const copyButton = document.getElementById('copyButton');
const content = document.getElementById('content');
copyButton.addEventListener('click', function () {
  const Selection = window.getSelection();
  const range = document.createRange();
  //Legen Sie den ausgewählten Inhaltsbereich fest.selectNodeContents(content);
  // Auswahl löschen Selection.removeAllRanges();
  //Ausgewählten Inhalt hinzufügen Selection.addRange(range);
  document.execCommand('copy');
});

Die Auswahl muss zuerst gelöscht werden und dann wird der Bereich hinzugefügt.

Hier gibt es ein Detailproblem. Nach dem Klicken auf die Schaltfläche „Kopieren“ wird der kopierte Inhalt ausgewählt, was etwas abrupt erfolgt.

Die Lösung besteht darin, nach Abschluss des Kopiervorgangs selection.removeAllRanges() aufzurufen, um die Auswahl zu löschen.

Stellen Sie sich eine andere Situation vor, in der der Benutzer einen Teil der Seite auswählt, bevor er sie kopiert. Nachdem der Kopiervorgang abgeschlossen ist, müssen Sie nicht nur den ausgewählten Kopierinhalt löschen, sondern auch den Inhalt wiederherstellen, den der Benutzer vor dem Kopieren ausgewählt hat.

Der Implementierungscode lautet wie folgt:

const copyButton = document.getElementById('copyButton');
const content = document.getElementById('content');
copyButton.addEventListener('click', function () {
  const Selection = window.getSelection();
  const range = document.createRange();
  //Zwischenspeichern des vom Benutzer ausgewählten Inhalts const currentRange =
    Selection.rangeCount === 0 ? null :selection.getRangeAt(0);
  //Dokumentfragment festlegen range.selectNodeContents(content);
  // Auswahl löschen Selection.removeAllRanges();
  //Legen Sie das Dokumentfragment als ausgewählten Inhalt fest Selection.addRange(range);
  versuchen {
    // In die Zwischenablage kopieren document.execCommand('copy');
  } fangen (irrt) {
    // Aufforderung zum Kopieren fehlgeschlagen} schließlich {
    Selection.removeAllRanges();
    if (currentRange) {
      //vom Benutzer ausgewählten Inhalt wiederherstellen Selection.addRange(currentRange);
    }
  }
});

Cachen Sie zunächst den vom Benutzer ausgewählten Inhalt und stellen Sie ihn dann wieder her, nachdem der Kopiervorgang abgeschlossen ist.

Kopieren Sie den Inhalt des Eingabeelements

und verwenden Sie die select des Eingabeelementobjekts, um den Inhalt auszuwählen. Es ist nicht erforderlich, ein Bereichsfragment zu erstellen, um den ausgewählten Inhalt festzulegen.

Beispielcode:

const copyButton = document.getElementById('copyButton');
const inputEl = document.getElementById('input');
copyButton.addEventListener('click', function () {
  const Selection = window.getSelection();
  const currentRange =
    Selection.rangeCount === 0 ? null :selection.getRangeAt(0);
  //Wählen Sie den Eingabeinhalt aus inputEl.select();
  //In Zwischenablage kopieren try {
    document.execCommand('copy');
  } fangen (irrt) {
    // Aufforderung, dass der Kopiervorgang fehlgeschlagen ist // . . .
  } Endlich {
    Selection.removeAllRanges();
    if (currentRange) {
      //vom Benutzer ausgewählten Inhalt wiederherstellen Selection.addRange(currentRange);
    }
  }
});

Durch Klicken auf die Schaltfläche „Kopieren“ wird der zuvor ausgewählte Inhalt ebenfalls nicht entfernt.

Methode 3: Überschreiben Sie das Kopierereignis

w3c.github.io/clipboard-a…

Zitieren Sie als Beispiel einen Codeabschnitt im obigen Link:

// Überschreiben Sie, was in die Zwischenablage kopiert wird.
document.addEventListener('copy', function (e) {
  // e.clipboardData ist zunächst leer, aber wir können es auf festlegen
  // Daten, die wir in die Zwischenablage kopieren möchten.
  e.clipboardData.setData('text/plain', 'Western-Rührei');
  // Dies ist notwendig, um die aktuelle Dokumentauswahl zu verhindern
  // wird in die Zwischenablage geschrieben.
  e.preventDefault();
});

Kopieren Sie alle Inhalte auf der Seite und fügen Sie den Ausgabeinhalt „Western-Rührei“ ein.