Werfen wir einen Blick auf die JavaScript Asynchronous Clipboard API

In den letzten Jahren konnten wir die Zwischenablage nur mit document.execCommand bedienen. Diese Manipulation der Zwischenablage ist jedoch synchron und kann nur im DOM lesen und schreiben.

Chrome 66 unterstützt jetzt die neue Async Clipboard API als execCommand Ersatz.

Diese neue Async-Clipboard-API kann auch Promises verwenden, um Zwischenablageereignisse zu vereinfachen und sie mit der Drag-&-Drop-API zu verwenden.

Kopieren: Text in die Zwischenablage schreiben

writeText() Sie können Text in die Zwischenablage schreiben. writeText() ist asynchron, es gibt ein Versprechen zurück:

navigator.clipboard.writeText('要复制的文本')
  .then(() => {
    console.log('文本已经成功复制到剪切板');
  })
  .catch(err => {
    // This can happen if the user denies clipboard permissions:
    // 如果用户没有授权，则抛出异常
    console.error('无法复制此文本：', err);
  });

Sie können auch asynchrone Funktionen von async und await verwenden:

async function copyPageUrl() {
  try {
    await navigator.clipboard.writeText(location.href);
    console.log('Page URL copied to clipboard');
  } catch (err) {
    console.error('Failed to copy: ', err);
  }
}

Einfügen: Text aus der Zwischenablage lesen

Wie beim Kopieren kann Text aus der Zwischenablage gelesen werden, indem readText() aufgerufen wird, was auch ein Promise zurückgibt:

navigator.clipboard.readText()
  .then(text => {
    console.log('Pasted content: ', text);
  })
  .catch(err => {
    console.error('Failed to read clipboard contents: ', err);
  });

Aus Gründen der Konsistenz ist hier die entsprechende asynchrone Funktion:

async function getClipboardContents() {
  try {
    const text = await navigator.clipboard.readText();
    console.log('Pasted content: ', text);
  } catch (err) {
    console.error('Failed to read clipboard contents: ', err);
  }
}

Handhabung von Einfügeereignissen

Es gibt Pläne für ein neues Ereignis, um Änderungen in der Zwischenablage zu erkennen, aber im Moment ist es besser, das „Einfüge“-Ereignis zu verwenden. Es funktioniert gut mit der neuen asynchronen Methode zum Lesen von Zwischenablagetext:

document.addEventListener('paste', event => {
  event.preventDefault();
  navigator.clipboard.readText().then(text => {
    console.log('Pasted text: ', text);
  });
});

Sicherheit und Berechtigungen

Der Zugriff auf die Zwischenablage hat schon immer zu Sicherheitsproblemen für Browser geführt. Ohne die entsprechenden Berechtigungen könnte die Seite heimlich schädliche Inhalte in die Zwischenablage des Benutzers kopieren, was beim Einfügen katastrophale Folgen hätte. Stellen Sie sich eine Webseite vor, die stillschweigend rm -rf / kopiert oder ein Bombenbild in die Zwischenablage entpackt.

Webseiten das uneingeschränkte Lesen der Zwischenablage zu erlauben, ist problematischer. Benutzer kopieren häufig sensible Informationen wie Passwörter und persönliche Daten in die Zwischenablage, die dann von jeder Seite aus gelesen werden können, ohne dass der Benutzer es überhaupt bemerkt.

Wie viele neue APIs unterstützt navigator.clipboard nur Seiten, die über HTTPS bereitgestellt werden. Um Missbrauch zu verhindern, ist der Zugriff auf die Zwischenablage nur zulässig, wenn sich die Seite im aktiven Tab befindet. Seiten im aktiven Tab können in die Zwischenablage schreiben, ohne eine Erlaubnis anzufordern, aber das Lesen aus der Zwischenablage erfordert immer eine Erlaubnis.

Um es einfacher zu machen, wurden der Berechtigungs-API zwei neue Berechtigungen zum Kopieren und Einfügen hinzugefügt. Die Schreibberechtigung für die Zwischenablage wird der Seite automatisch gewährt, wenn sie sich im aktiven Tab befindet. Wenn Sie Daten aus der Zwischenablage lesen, müssen Sie um die Berechtigung zum Lesen der Zwischenablage bitten.

{ name: 'clipboard-read' }
{ name: 'clipboard-write' }

Wie bei allem anderen, das die Berechtigungs-API verwendet, können Sie überprüfen, ob Ihre App die Berechtigung hat, mit der Zwischenablage zu interagieren:

navigator.permissions.query({
  name: 'clipboard-read'
}).then(permissionStatus => {
  // permissionStatus.state 的值是 'granted'、'denied'、'prompt':
  console.log(permissionStatus.state);

  // 监听权限状态改变事件
  permissionStatus.onchange = () => {
    console.log(permissionStatus.state);
  };
});

Hier ist die Zwischenablage Hier kommt der „asynchrone“ Teil der Board-API zum Einsatz: Bei Versuchen, Daten aus der Zwischenablage zu lesen oder zu schreiben, wird der Benutzer automatisch um Erlaubnis gebeten, sofern diese noch nicht erteilt wurde. Da die API auf Versprechen basiert, wird das Versprechen abgelehnt, wenn der Benutzer die Berechtigung für die Zwischenablage verweigert, damit die Seite entsprechend reagieren kann.

Da Chrome den Zugriff auf die Zwischenablage nur zulässt, wenn die Seite der aktuell aktive Tab ist, werden Sie feststellen, dass einige der Beispiele hier nicht korrekt ausgeführt werden, wenn Sie sie direkt in DevTools einfügen, da DevTools selbst zu diesem Zeitpunkt aktiv ist (Die Seite ist nicht die aktive Registerkarte). Es gibt einen Trick: Wir müssen den Zugriff auf die Zwischenablage mit setTimeout verzögern und dann schnell in die Seite klicken, um den Fokus zu erhalten, bevor wir die Funktion aufrufen:

setTimeout(async () => {
  const text = await navigator.clipboard.readText();
  console.log(text);
}, 2000);

Review

Vor der Einführung des Asynchronen Mit der Zwischenablage-API haben wir verschiedene Implementierungen zum Kopieren und Einfügen in Webbrowsern gemischt.

In den meisten Browsern ist es möglich, document.execCommand('copy') zu verwenden und das browsereigene Kopieren und Einfügen document.execCommand('paste') auszulösen. Wenn es sich bei dem zu kopierenden Text um eine Zeichenfolge handelt, die im DOM nicht vorhanden ist, müssen wir ihn in das DOM einfügen und auswählen:

button.addEventListener('click', e => {
  const input = document.createElement('input');
  document.body.appendChild(input);
  input.value = text;
  input.focus();
  input.select();
  const result = document.execCommand('copy');
  if (result === 'unsuccessful') {
    console.error('Failed to copy text.');
  }
})

Auch hier erfahren Sie, wie Sie ohne Unterstützung für das neue Async navigieren können Clipboard API Der eingefügte Inhalt wird im Browser verarbeitet:

Von: https://github.com/justjavac/the-front-end-knowledge-you-may-not-know/issues/23

document.addEventListener('paste', e => {
  const text = e.clipboardData.getData('text/plain');
  console.log('Got pasted text: ', text);
})

Im Internet Explorer können wir auch über window.clipboardData auf die Zwischenablage zugreifen. Wenn der Zugriff im Rahmen einer Benutzergeste erfolgt (z. B. ein Klickereignis) – Teil der verantwortungsvollen Anforderung von Berechtigungen – wird die Berechtigungsaufforderung nicht angezeigt.

Erkennung und Fallback

Obwohl alle Browser unterstützt werden, ist es eine gute Idee, die Funktionserkennung zu verwenden, um die Vorteile der asynchronen Zwischenablage zu nutzen. Sie können die Unterstützung für die Async Clipboard API erkennen, indem Sie navigator.clipboard:

document.addEventListener('paste', async e => {
  let text;
  if (navigator.clipboard) {
    text = await navigator.clipboard.readText()
  }
  else {
    text = e.clipboardData.getData('text/plain');
  }
  console.log('Got pasted text: ', text);
});

异步剪贴板 API 的下一步是什么？

正如你可能已经注意到的那样，这篇文章只涵盖了 navigator.clipboard 的文本部分。规范中有更多的通用 read() 和 write() 方法，但是这些会带来额外的实现复杂性和安全性问题（请记住那些图像炸弹？）。目前，Chrome 正在推出更简单的 API 文本部分。

出自：justjavac

推荐教程：《javascript基础教程》

Das obige ist der detaillierte Inhalt vonWerfen wir einen Blick auf die JavaScript Asynchronous Clipboard API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!