DataTransferItem: Methode getAsString()
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit November 2016 browserübergreifend verfügbar.
Die Methode getAsString() des Interfaces DataTransferItem ruft den angegebenen Callback mit den String-Daten des Drag-Datenelements als Argument auf, wenn dessen kind ein Plain unicode string ist (d.h. kind ist string).
Während eines Drag-Vorgangs kann diese Methode Daten nur in den Handlern für die Ereignisse dragstart und drop lesen, da der Drag-Datenspeicher nur zu diesen Zeitpunkten lesbar ist. Ein Aufruf aus einem anderen Drag-Ereignis ruft den Callback nicht auf. Die Methode muss innerhalb des Event-Handlers synchron aufgerufen werden, obwohl der Callback asynchron ausgeführt wird. Details finden Sie unter Lesen des Drag-Datenspeichers.
Syntax
getAsString(callbackFn)
Parameter
callbackFn-
Eine Callback-Funktion, die die folgenden Argumente erhält:
data-
Die String-Daten des
DataTransferItem.
Rückgabewert
Keiner (undefined).
Beispiele
Dieses Beispiel zeigt die Verwendung der Methode getAsString() als inline function in einem Event-Handler für drop.
function dropHandler(ev) {
console.log("Drop");
ev.preventDefault();
for (const item of ev.dataTransfer.items) {
if (item.kind === "string" && item.type === "text/plain") {
// This item is the target node
item.getAsString((s) => {
ev.target.appendChild(document.getElementById(s));
});
} else if (item.kind === "string" && item.type === "text/html") {
// Drag data item is HTML
console.log("… Drop: HTML");
} else if (item.kind === "string" && item.type === "text/uri-list") {
// Drag data item is URI
console.log("… Drop: URI");
} else if (item.kind === "file" && item.type.startsWith("image/")) {
// Drag data item is an image file
const f = item.getAsFile();
console.log("… Drop: File");
}
}
}
Spezifikationen
| Spezifikation |
|---|
| HTML # dom-datatransferitem-getasstring-dev |