Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie lese ich den Inhalt der Zwischenablage beim Laden der Seite mithilfe der Zwischenablage-API?

Susan Sarandon
Freigeben: 2024-10-27 13:30:02
Original
869 Leute haben es durchsucht

How to Read the Clipboard Content on Page Load Using the Clipboard API?

So rufen Sie den Inhalt der Zwischenablage beim Laden der Seite ab

Webbrowser bieten eine API für den Zugriff auf die Zwischenablage, sodass Sie deren Inhalt auf der Seite abrufen können Laden ohne Benutzerinteraktion. Diese Funktion ist besonders nützlich für Aufgaben wie das Vorausfüllen von Textfeldern oder das Anzeigen von Zwischenablagedaten.

Verwenden der Zwischenablage-API

Die Zwischenablage-API (navigator.clipboard) bietet eine Methode namens readText(). Wie der Name schon sagt, ermöglicht es Ihnen, den aktuellen Textinhalt aus der Zwischenablage zu lesen.

Sie können diese API auf zwei Arten verwenden: mit asynchroner/await-Syntax oder Promise-Syntax.

Mit Async/Await-Syntax:

<code class="javascript">const text = await navigator.clipboard.readText();</code>
Nach dem Login kopieren

Mit Promise-Syntax:

<code class="javascript">navigator.clipboard.readText()
  .then(text => {
    console.log('Pasted content: ', text);
  })
  .catch(err => {
    console.error('Failed to read clipboard contents: ', err);
  });</code>
Nach dem Login kopieren

Berechtigungsanfrage

Es ist wichtig zu beachten, dass diese API den Benutzer mit einem Dialogfeld zur Berechtigungsanfrage auffordert. Dadurch wird sichergestellt, dass keine bösartigen Skripte ohne Zustimmung des Benutzers auf die Daten der Zwischenablage zugreifen können.

Einschränkungen und Problemumgehungen

Die Clipboard-API funktioniert in Firefox ab Version 109 nicht. Wenn Sie Wenn Sie Firefox-Benutzer unterstützen müssen, können Sie die Verwendung einer Zwischenablagebibliothek eines Drittanbieters in Betracht ziehen.

Um den API-Code von der Konsole aus auszuführen, können Sie eine Zeitüberschreitung verwenden und schnell in das Website-Fenster klicken.

<code class="javascript">setTimeout(async () => {
  const text = await navigator.clipboard.readText();
  console.log(text);
}, 2000);</code>
Nach dem Login kopieren

Zusätzliche Ressourcen

Weitere Informationen und Nutzungsrichtlinien finden Sie in der folgenden Google-Entwicklerdokumentation:

  • [Clipboard API](https:/ /developer.mozilla.org/en-US/docs/Web/API/Clipboard_API)
  • [Spec](https://w3c.github.io/clipboard-apis/)

Das obige ist der detaillierte Inhalt vonWie lese ich den Inhalt der Zwischenablage beim Laden der Seite mithilfe der Zwischenablage-API?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage