Wie kann ich Text in JavaScript über verschiedene Browser hinweg zuverlässig in die Zwischenablage kopieren?

Kopieren in die Zwischenablage in JavaScript: Ein Multi-Browser-Ansatz

Das Kopieren von Text in die Zwischenablage erfordert die Nutzung verschiedener Browser-APIs. Dieser Artikel konzentriert sich auf die drei Hauptmethoden:

1. Async Clipboard API: [navigator.clipboard.writeText]
Die in Chrome 66 veröffentlichte Async Clipboard API bietet asynchronen Zugriff auf die Zwischenablage. Es verwendet Promises, um sicherzustellen, dass Benutzereingabeaufforderungen die JavaScript-Ausführung nicht unterbrechen. Diese Methode erfordert HTTPS und unterstützt inaktive Tabs in Chrome 66.

2. document.execCommand('copy') (veraltet)
Seit 2015 in den meisten Browsern verfügbar, ist diese Methode synchron und blockiert die JavaScript-Ausführung. Es kopiert Text aus dem DOM und legt ihn in der Zwischenablage ab. Einige Browser zeigen während des Vorgangs möglicherweise Berechtigungsaufforderungen an.

3. Überschreiben des Kopierereignisses
Mit dieser erweiterten Technik können Sie basierend auf Kopierereignissen ändern, was in der Zwischenablage angezeigt wird. Es wird hier nicht behandelt, da es sich nicht direkt um das Kopieren in die Zwischenablage handelt.

Allgemeine Entwicklungshinweise

• Vorgänge in der Zwischenablage erfordern im Allgemeinen, dass die Seite aktiv ist oder Benutzerinteraktion erforderlich.
• Ab Februar 2020 können ursprungsübergreifende IFRAMEs und IFRAME-Sandboxing verhindern, dass der Beispielcode funktioniert einige Browser.

Asynchroner Fallback-Ansatz

Um die browserübergreifende Kompatibilität sicherzustellen, sollten Sie die Verwendung eines asynchronen Ansatzes in Betracht ziehen, der auf document.execCommand('copy') zurückgreift. ) für ältere Browser:

function copyTextToClipboard(text) {
  if (!navigator.clipboard) {
    fallbackCopyTextToClipboard(text);
    return;
  }
  navigator.clipboard.writeText(text).then(() => {
    console.log('Async: Copying to clipboard was successful!');
  }, (err) => {
    console.error('Async: Could not copy text: ', err);
  });
}

Das obige ist der detaillierte Inhalt vonWie kann ich Text in JavaScript über verschiedene Browser hinweg zuverlässig in die Zwischenablage kopieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!