1. Web
  2. Web-APIs
  3. Clipboard
  4. read()

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

Clipboard: read() Methode

Baseline 2024 *
Newly available

Since ⁨June 2024⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Die read() Methode der Clipboard-Schnittstelle fordert eine Kopie der Inhalte der Zwischenablage an und erfüllt das zurückgegebene Promise mit den Daten.

Die Methode kann theoretisch beliebige Daten zurückgeben (im Gegensatz zu readText(), die nur Text zurückgeben kann). Browser unterstützen üblicherweise das Lesen von Text, HTML und PNG-Bilddaten.

Syntax

js
read()
read(formats)

Parameter

formats Optional

Ein optionales Objekt mit den folgenden Eigenschaften:

unsanitized Optional

Ein Array von Zeichenfolgen, das MIME-Typen von Datenformaten enthält, die beim Lesen von der Zwischenablage nicht bereinigt werden sollen.

Bestimmte Browser können die Daten der Zwischenablage bereinigen, wenn sie gelesen werden, um zu verhindern, dass schädliche Inhalte in das Dokument eingefügt werden. Beispielsweise bereinigt Chrome (und andere auf Chromium basierende Browser) HTML-Daten durch das Entfernen von <script>-Tags und anderen potenziell gefährlichen Inhalten. Verwenden Sie das unsanitized-Array, um eine Liste von MIME-Typen anzugeben, die nicht bereinigt werden sollen.

Rückgabewert

Ein Promise, das mit einem Array von ClipboardItem-Objekten aufgelöst wird, die die Inhalte der Zwischenablage enthalten.

Ausnahmen

NotAllowedError DOMException

Wird ausgelöst, wenn das Lesen von der Zwischenablage nicht erlaubt ist.

Sicherheitsüberlegungen

Das Lesen von der Zwischenablage kann nur in einem sicheren Kontext erfolgen.

Zusätzliche Sicherheitsanforderungen werden im Abschnitt Sicherheitsüberlegungen des API-Übersichtsthemas behandelt.

Beispiele

Bilddaten aus der Zwischenablage lesen

Dieses Beispiel verwendet die read()-Methode, um Bilddaten aus der Zwischenablage zu lesen und in ein <img>-Element einzufügen.

HTML

html
<img id="source" src="butterfly.jpg" alt="A butterfly" />
<img id="destination" src="" alt="Pasted image" />
<button id="reload" type="button">Reload</button>
<p id="log"></p>

CSS

css
img {
  height: 100px;
  width: 100px;
  margin: 0 1rem;
  border: 1px solid black;
}
#reload {
  display: block;
  margin: 0 1rem;
}

JavaScript

Dieser Code bietet einen Mechanismus, um Fehler in das Element mit der ID log zu protokollieren.

js
const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `Error: ${text}`;
}

Wir fügen auch Code hinzu, um das Beispiel neu zu laden und zu löschen, wenn die Schaltfläche "Neu laden" gedrückt wird.

js
const reload = document.querySelector("#reload");

reload.addEventListener("click", () => {
  window.location.reload(true);
});

Der verbleibende Code liest die Zwischenablage, wenn das Zielelement angeklickt wird, und kopiert die Bilddaten in das destinationImage-Element. Es protokolliert einen Fehler, wenn es die read()-Methode nicht verwenden kann oder wenn die Zwischenablage keine Daten im PNG-Format enthält.

js
const destinationImage = document.querySelector("#destination");
destinationImage.addEventListener("click", pasteImage);

async function pasteImage() {
  try {
    const clipboardContents = await navigator.clipboard.read();
    for (const item of clipboardContents) {
      if (!item.types.includes("image/png")) {
        throw new Error("Clipboard does not contain PNG image data.");
      }
      const blob = await item.getType("image/png");
      destinationImage.src = URL.createObjectURL(blob);
    }
  } catch (error) {
    log(error.message);
  }
}

Ergebnis

Kopieren Sie das Schmetterlingsbild auf der linken Seite, indem Sie mit der rechten Maustaste auf das Bild klicken und "Bild kopieren" aus dem Kontextmenü auswählen. Klicken Sie dann auf den leeren Rahmen auf der rechten Seite. Das Beispiel ruft die Bilddaten aus der Zwischenablage ab und zeigt das Bild im leeren Rahmen an.

Hinweis: Wenn Sie dazu aufgefordert werden, gewähren Sie die Erlaubnis, um das Bild einzufügen.

Daten aus der Zwischenablage lesen

Dieses Beispiel verwendet die read()-Methode, um Daten aus der Zwischenablage zu lesen und alle im Clipboard gespeicherten Daten zu protokollieren.

Dies unterscheidet sich von der vorherigen Version, indem es Text-, HTML- und Bild- ClipboardItem-Objekte anzeigt (anstatt nur Bilder).

HTML

html
<img id="source_jpg" src="butterfly.jpg" alt="JPG butterfly image" />
<div id="destination">Click here to copy clipboard data.</div>
<button id="reload" type="button">Reload</button>
<p id="log"></p>

CSS

css
img {
  height: 100px;
  width: 100px;
  margin: 0 1rem;
  border: 1px solid black;
}

#destination {
  min-height: 300px;
  min-width: 90%;
  margin: 0 1rem;
  border: 1px solid black;
}

#reload {
  display: block;
  margin: 0 1rem;
}

JavaScript

Dieser Code bietet einen Mechanismus, um Fehler in das Element mit der ID log zu protokollieren.

js
const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `Error: ${text}`;
}

Wir fügen auch Code hinzu, um das Beispiel neu zu laden und zu löschen, wenn die Schaltfläche "Neu laden" gedrückt wird.

js
const reload = document.querySelector("#reload");

reload.addEventListener("click", () => {
  window.location.reload(true);
});

Der verbleibende Code liest die Zwischenablage, wenn das Zielelement angeklickt wird, und zeigt jedes ClipboardItem-Element zusammen mit seinem MIME-Typ an. Es protokolliert einen Fehler, wenn es die read()-Methode nicht verwenden kann oder wenn die Zwischenablage einen anderen MIME-Typ enthält.

js
const destinationDiv = document.querySelector("#destination");
destinationDiv.addEventListener("click", pasteData);

async function pasteData() {
  destinationDiv.innerText = ""; // Clear inner text
  try {
    const clipboardContents = await navigator.clipboard.read();
    for (const item of clipboardContents) {
      for (const mimeType of item.types) {
        const mimeTypeElement = document.createElement("p");
        mimeTypeElement.innerText = `MIME type: ${mimeType}`;
        destinationDiv.appendChild(mimeTypeElement);
        if (mimeType === "image/png") {
          const pngImage = new Image();
          pngImage.alt = "PNG image from clipboard";
          const blob = await item.getType("image/png");
          pngImage.src = URL.createObjectURL(blob);
          destinationDiv.appendChild(pngImage);
        } else if (mimeType === "text/html") {
          const blob = await item.getType("text/html");
          const blobText = await blob.text();
          const clipHTML = document.createElement("pre");
          clipHTML.innerText = blobText;
          destinationDiv.appendChild(clipHTML);
        } else if (mimeType === "text/plain") {
          const blob = await item.getType("text/plain");
          const blobText = await blob.text();
          const clipPlain = document.createElement("pre");
          clipPlain.innerText = blobText;
          destinationDiv.appendChild(clipPlain);
        } else {
          throw new Error(`${mimeType} not supported.`);
        }
      }
    }
  } catch (error) {
    log(error.message);
  }
}

Ergebnis

Kopieren Sie etwas Text oder das Schmetterlingsbild (JPG) unten (um Bilder zu kopieren, klicken Sie mit der rechten Maustaste auf sie und wählen Sie dann "Bild kopieren" aus dem Kontextmenü). Wählen Sie den angegebenen Rahmen unten aus, um diese Informationen aus der Zwischenablage in den Rahmen einzufügen.

Hinweise:

  • Obwohl das Schmetterlingsbild eine JPG-Datei ist, ist es beim Lesen aus der Zwischenablage ein PNG.
  • Wenn Sie dazu aufgefordert werden, müssen Sie die Erlaubnis gewähren, um das Bild einzufügen.
  • Dies funktioniert möglicherweise nicht in Chromium-Browsern, da dem Beispielrahmen nicht die Berechtigungsrichtlinie clipboard-read und clipboard-write Berechtigungen erteilt werden (erforderlich von Chromium-Browsern).

Nicht bereinigtes HTML aus der Zwischenablage lesen

Dieses Beispiel verwendet den formats-Parameter, um HTML-Daten aus der Zwischenablage zu lesen und den Code in seiner Originalform zu erhalten, ohne dass der Browser ihn zuerst bereinigt.

HTML

html
<textarea id="source" rows="5">
  <style>h1 {color: red;} p {color: blue;}</style>
  <h1>Hello world!</h1>
  <p>This is a test.</p>
  <script>alert('Hello world!');</script>
</textarea>
<button id="copy">Copy HTML</button>
<button id="paste_normal">Paste HTML</button>
<button id="paste_unsanitized">Paste unsanitized HTML</button>
<textarea id="destination" rows="5"></textarea>

CSS

css
body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

textarea {
  grid-column: 1 / span 3;
}

JavaScript

js
const copyButton = document.getElementById("copy");
const pasteButton = document.getElementById("paste_normal");
const pasteUnsanitizedButton = document.getElementById("paste_unsanitized");
const sourceTextarea = document.getElementById("source");
const destinationTextarea = document.getElementById("destination");

copyButton.addEventListener("click", async () => {
  const text = sourceTextarea.value;
  const type = "text/html";
  const blob = new Blob([text], { type });
  const data = [new ClipboardItem({ [type]: blob })];

  try {
    await navigator.clipboard.write(data);
  } catch (error) {
    destinationTextarea.value = `Clipboard write failed: ${error}`;
  }
});

async function getHTMLFromClipboardContents(clipboardContents) {
  for (const item of clipboardContents) {
    if (item.types.includes("text/html")) {
      const blob = await item.getType("text/html");
      const blobText = await blob.text();
      return blobText;
    }
  }

  return null;
}

pasteButton.addEventListener("click", async () => {
  try {
    const clipboardContents = await navigator.clipboard.read();
    const html = await getHTMLFromClipboardContents(clipboardContents);
    destinationTextarea.value =
      html || "Could not find HTML data in the clipboard.";
  } catch (error) {
    destinationTextarea.value = `Clipboard read failed: ${error}`;
  }
});

pasteUnsanitizedButton.addEventListener("click", async () => {
  try {
    const clipboardContents = await navigator.clipboard.read({
      unsanitized: ["text/html"],
    });
    const html = await getHTMLFromClipboardContents(clipboardContents);
    destinationTextarea.value =
      html || "Could not find HTML data in the clipboard.";
  } catch (error) {
    destinationTextarea.value = `Clipboard read failed: ${error}`;
  }
});

Ergebnis

Klicken Sie zuerst auf die Schaltfläche "HTML kopieren", um den HTML-Code aus dem ersten Textbereich in die Zwischenablage zu schreiben. Klicken Sie dann entweder auf die Schaltfläche "HTML einfügen" oder auf die Schaltfläche "Nicht bereinigtes HTML einfügen", um den bereinigten oder nicht bereinigten HTML-Code in den zweiten Textbereich einzufügen.

Spezifikationen

Specification
Clipboard API and events
# dom-clipboard-read

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden