Diese Seite wurde von der Cloud Translation API übersetzt.

Hindernisse mit der DataTransfer API beseitigen

Dem Nutzer ermöglichen, Daten über das Browserfenster hinaus freizugeben.

Jorik Tangelder

Thomas Steiner

Vielleicht haben Sie schon einmal DataTransfer API, die Teil des HTML5 Drag-and-drop API und Clipboard-Veranstaltungen. Es kann werden verwendet, um Daten zwischen Quell- und Zielzielen zu übertragen.

Unterstützte Browser

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

Quelle

Die Interaktionen per Drag-and-drop und Kopieren/Einfügen werden häufig für Interaktionen innerhalb einer Seite verwendet einfachen Text von A nach B übertragen. Oft übersehen wir jedoch die Möglichkeit, über das Browserfenster hinaus.

Sowohl die im Browser integrierte Drag-and-drop-Funktion als auch die Interaktionen zwischen Kopieren und Einfügen können mit anderen Anwendungen verbunden sind, egal ob es sich um Web- oder andere Anwendungen handelt, und sind nicht an einen Ursprung gebunden. Die API unterstützt mehrere Dateneinträge mit unterschiedlichem Verhalten, je nachdem, wohin die Daten übertragen werden. Ihr Webanwendung die übertragenen Daten senden und empfangen können, wenn eingehende Ereignisse überwacht werden.

Diese Fähigkeit kann die Sichtweise auf Freigabe und Interoperabilität im Web verändern. Desktop-Anwendungen. Bei der Datenübertragung zwischen Anwendungen sind eng gekoppelte Integrationen. Stattdessen können Sie Nutzern die volle Kontrolle über Daten an jeden beliebigen Ort liefern.

</ph> <ph type="x-smartling-placeholder"></ph>

Beispiel für Interaktionen mit der DataTransfer API. (Video ohne Ton.)

Daten übertragen

Zunächst müssen Sie Drag-drop oder Copy-Paste implementieren. Beispiele unten zeigen Drag-Drop-Interaktionen, der Prozess für Kopieren und Einfügen ist jedoch ähnlich. Wenn mit der Drag & Drop API nicht vertraut sind, gibt es einen tollen Artikel mit einer Erläuterung zu Drag-and-drop von HTML5, in der die Vor- und Nachteile erläutert werden.

Durch die Bereitstellung von verschlüsselten MIME-type-Daten können Sie frei mit externen Anwendungen interagieren. Die meisten WYSIWYG-Editoren, Texteditoren und Browser reagieren auf die MIME-Typen, die in den Beispiel unten.

document.querySelector('#dragSource')
.addEventListener('dragstart', (event) => {
  event.dataTransfer.setData('text/plain', 'Foo bar');
  event.dataTransfer.setData('text/html', '<h1>Foo bar</h1>');
  event.dataTransfer.setData('text/uri-list', 'https://example.com');
});

Beachten Sie die Eigenschaft event.dataTransfer. Dies gibt eine Instanz von DataTransfer Als sehen Sie, wird dieses Objekt manchmal von Eigenschaften mit anderen Namen zurückgegeben.

Der Empfang der Datenübertragung funktioniert fast genauso wie die Bereitstellung. Auf Empfangsereignisse warten (drop oder paste) und lesen Sie die Schlüssel. Beim Ziehen über ein Element hat der Browser nur Zugriff den type-Schlüsseln der Daten hinzu. Auf die Daten selbst kann erst nach dem Löschen zugegriffen werden.

document.querySelector('#dropTarget')
.addEventListener('dragover', (event) => {
  console.log(event.dataTransfer.types);
  // Without this, the drop event won't fire.
  event.preventDefault();
});

document.querySelector('#dropTarget')
.addEventListener('drop', (event) => {
  // Log all the transferred data items to the console.
  for (let type of event.dataTransfer.types) {
    console.log({ type, data: event.dataTransfer.getData(type) });
  }
  event.preventDefault();
});

In vielen Anwendungen werden drei MIME-Typen unterstützt:

text/html: Rendert die HTML-Nutzlast in contentEditable-Elementen und rendert Texteditoren (WYSIWYG) wie Google Docs, Microsoft Word und andere.
text/plain: Legt den Wert von Eingabeelementen, Inhalten von Codeeditoren und des Fallbacks fest von text/html.
text/uri-list:Die URL wird aufgerufen, wenn sie auf die URL-Leiste oder die Browserseite verschoben wird. Eine URL wird beim Ablegen in ein Verzeichnis oder den Desktop erstellt.

Da text/html von WYSIWYG-Editoren weit verbreitet ist, ist sie sehr nützlich. Wie in HTML können Sie Ressourcen einbetten, indem Sie Daten-URLs oder öffentlich zugängliche URLs. Das funktioniert gut, wenn Sie visuelle Elemente (z. B. aus einem Canvas) in Editoren exportieren wie Google Docs.

const redPixel = 'data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs=';
const html = '<img src="' + redPixel + '" width="100" height="100" alt="" />';
event.dataTransfer.setData('text/html', html);

Durch Kopieren und Einfügen übertragen

Im Folgenden wird die Verwendung der DataTransfer API mit Interaktionen vom Typ „Kopieren und Einfügen“ dargestellt. Beachten Sie, dass Das Objekt DataTransfer wird von einer Eigenschaft namens clipboardData für Ereignisse in der Zwischenablage zurückgegeben.

// Listen to copy-paste events on the document.
document.addEventListener('copy', (event) => {
  const copySource = document.querySelector('#copySource');
  // Only copy when the `activeElement` (i.e., focused element) is,
  // or is within, the `copySource` element.
  if (copySource.contains(document.activeElement)) {
    event.clipboardData.setData('text/plain', 'Foo bar');
    event.preventDefault();
  }
});

document.addEventListener('paste', (event) => {
  const pasteTarget = document.querySelector('#pasteTarget');
  if (pasteTarget.contains(document.activeElement)) {
    const data = event.clipboardData.getData('text/plain');
    console.log(data);
  }
});

Benutzerdefinierte Datenformate

Sie sind nicht auf die primitiven MIME-Typen beschränkt, können aber einen beliebigen Schlüssel verwenden, um die übertragenen Daten. Dies kann für browserübergreifende Interaktionen innerhalb Ihrer Anwendung nützlich sein. Wie unten gezeigt, kann mit den Funktionen JSON.stringify() und JSON.parse() komplexere Daten übertragen.

document.querySelector('#dragSource')
.addEventListener('dragstart', (event) => {
  const data = { foo: 'bar' };
  event.dataTransfer.setData('my-custom-type', JSON.stringify(data));
});

document.querySelector('#dropTarget')
.addEventListener('dragover', (event) => {
  // Only allow dropping when our custom data is available.
  if (event.dataTransfer.types.includes('my-custom-type')) {
    event.preventDefault();
  }
});

document.querySelector('#dropTarget')
.addEventListener('drop', (event) => {
  if (event.dataTransfer.types.includes('my-custom-type')) {
    event.preventDefault();
    const dataString = event.dataTransfer.getData('my-custom-type');
    const data = JSON.parse(dataString);
    console.log(data);
  }
});

Internetverbindung herstellen

Benutzerdefinierte Formate eignen sich hervorragend für die Kommunikation zwischen Anwendungen, über die Sie die Kontrolle behalten. schränkt auch den Nutzer ein, wenn Daten an Anwendungen übertragen werden, die nicht Ihr Format verwenden. Wenn Sie Anwendungen von Drittanbietern im Web verbinden, benötigen Sie ein universelles Datenformat.

Der Standard JSON-LD ist dafür gut geeignet. Es ist und das Lesen und Schreiben in JavaScript ist einfach. Schema.org enthält viele vordefinierten Typen, die verwendet werden können, sowie benutzerdefinierte Schemadefinitionen sind ebenfalls eine Option.

const data = {
  '@context': 'https://schema.org',
  '@type': 'ImageObject',
  contentLocation: 'Venice, Italy',
  contentUrl: 'venice.jpg',
  datePublished: '2010-08-08',
  description: 'I took this picture during our honey moon.',
  name: 'Canal in Venice',
};
event.dataTransfer.setData('application/ld+json', JSON.stringify(data));

Wenn Sie die Schema.org-Typen verwenden, können Sie mit dem generischen Typ Thing beginnen, oder verwenden Sie etwas, das eher Ihrem Anwendungsfall entspricht, z. B. Ereignis, Person, MediaObject, Place oder sogar sehr spezifische Typen wie MedicalEntity, falls erforderlich. Wenn Sie TypeScript verwenden, können Sie den Schnittstellendefinitionen aus den Typdefinitionen schema-dts verwenden.

Durch das Übertragen und Empfangen von JSON-LD-Daten unterstützen Sie ein besser vernetztes und offenes Web. Mit Anwendungen, die dieselbe Sprache sprechen, können Sie tiefgreifende Integrationen mit externen Anwendungen. Es werden keine komplizierten API-Integrationen benötigt. dass alle benötigten Informationen die in den übertragenen Daten enthalten sind.

Denken Sie an alle Möglichkeiten zur Datenübertragung zwischen einer beliebigen (Webanwendung) ohne Einschränkungen: Freigeben von Terminen aus einem Kalender für Ihre bevorzugte ToDo-App, Anhängen von virtuellen Dateien an E-Mails und die Freigabe von Kontakten. Das wäre toll, oder? Das fängt bei dir an! 🙌

Bedenken

Die DataTransfer API ist zwar heute verfügbar, es gibt jedoch einige Dinge, die Sie vor der Integration beachten sollten.

Browserkompatibilität

Alle Desktop-Browser bieten eine hervorragende Unterstützung für die oben beschriebene Technik, während Mobilgeräte nicht. Das Verfahren wurde in allen gängigen Browsern (Chrome, Edge, Firefox, Safari) getestet und Betriebssysteme (Android, ChromeOS, iOS, macOS, Ubuntu Linux und Windows), aber leider Android und iOS hat den Test nicht bestanden. Obwohl Browser sich ständig weiterentwickeln, ist diese Technik derzeit eingeschränkt. nur für Desktop-Browser.

Auffindbarkeit

Drag-Drop und Kopieren/Einfügen sind Interaktionen auf Systemebene bei der Arbeit am Desktop-Computer, wobei auf den ersten GUIs vor mehr als 40 Jahren. Überlegen Sie, wie oft Sie zum Organisieren von Dateien verwendet. Dies ist im Web noch nicht sehr verbreitet.

Sie müssen die Nutzenden über diese neue Interaktion aufklären und UX-Muster entwickeln, um noch erkennbar sind, insbesondere für Menschen, deren Erfahrung mit dem Computer bisher auf Mobilgeräte beschränkt war.

Bedienungshilfen

Drag-Drop ist keine sehr zugängliche Interaktion, aber die DataTransfer API funktioniert auch mit Kopieren und Einfügen. Achten Sie darauf, dass Sie die Ereignisse zum Kopieren und Einfügen überwachen. Es ist kein großer Mehraufwand und Ihre Nutzer sind Ihnen dankbar, dass Sie sie hinzugefügt haben.

Sicherheit und Datenschutz

Wenn Sie dieses Verfahren verwenden, sollten Sie einige Sicherheits- und Datenschutzaspekte berücksichtigen.

Daten aus der Zwischenablage sind für andere Anwendungen auf dem Gerät des Nutzers verfügbar.
Webanwendungen, über die Sie ziehen, haben Zugriff auf die Typtasten, nicht auf die Daten. Nur die Daten per Drop oder Paste verfügbar wird.
Die empfangenen Daten sollten wie jede andere Nutzereingabe behandelt werden. vor der Verwendung desinfizieren und validieren.

Erste Schritte mit der Transmat-Hilfsbibliothek

Freuen Sie sich darauf, die DataTransfer API in Ihrer Anwendung zu verwenden? Wirf einen Blick auf die Transmat-Bibliothek auf GitHub Diese Open-Source-Bibliothek Unterschiede, bietet JSON-LD-Dienstprogramme und enthält einen Beobachter, der auf Übertragungsereignisse reagiert, Hervorhebung von Dropdown-Bereichen und ermöglicht Ihnen, die Datenübertragungsvorgänge in bestehende Drag & Drop- Implementierungen.

import { Transmat, TransmatObserver, addListeners } from 'transmat';

// Send data on drag/copy.
addListeners(myElement, 'transmit', (event) => {
  const transmat = new Transmat(event);
  transmat.setData({
    'text/plain': 'Foobar',
    'application/json': { foo: 'bar' },
  });
});

// Receive data on drop/paste.
addListeners(myElement, 'receive', (event) => {
  const transmat = new Transmat(event);
  if (transmat.hasType('application/json') && transmat.accept()) {
    const data = JSON.parse(transmat.getData('application/json'));
  }
});

// Observe transfer events and highlight drop areas.
const obs = new TransmatObserver((entries) => {
  for (const entry of entries) {
    const transmat = new Transmat(entry.event);
    if (transmat.hasMimeType('application/json')) {
      entry.target.classList.toggle('drag-over', entry.isTarget);
      entry.target.classList.toggle('drag-active', entry.isActive);
    }
  }
});
obs.observe(myElement);

Danksagungen

Hero-Image von Luba Ertel auf Unsplash (Unsplash).