JavaScript 非同期クリップボード API を見てみましょう

過去数年間、クリップボードを操作するには document.execCommand しか使用できませんでした。ただし、このクリップボードの操作は同期的であり、DOM の読み取りと書き込みのみが可能です。

Chrome 66 では、execCommand の代わりに新しい Async Clipboard API がサポートされるようになりました。

この新しい非同期クリップボード API では、Promise を使用してクリップボード イベントを簡素化し、ドラッグ アンド ドロップ API で使用することもできます。

コピー: テキストをクリップボードに書き込みます

writeText() テキストをクリップボードに書き込むことができます。 writeText() は非同期であり、Promise を返します:

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

非同期関数 async および await を使用することもできます:

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);
  }
}

貼り付け: クリップボードからテキストを読み取る

コピーと同様に、readText() を呼び出すことでクリップボードからテキストを読み取ることができます。この関数は Promise も返します:

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

一貫性を保つために、同等の非同期関数を次に示します。

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);
  }
}

貼り付けイベントの処理

クリップボードの変更を検出する新しいイベントを起動する計画がありますが、現時点では、 「貼り付け」イベント。これは、クリップボード テキストを読み取るための新しい非同期メソッドに適しています。

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

セキュリティと権限

クリップボードへのアクセスは、常にブラウザにセキュリティ問題を引き起こします。適切なアクセス許可がなければ、ページは悪意のあるコンテンツをユーザーのクリップボードにサイレントにコピーする可能性があり、貼り付けると悲惨な結果を招く可能性があります。 rm -rf / をサイレントにコピーするか、爆弾イメージをクリップボードに解凍する Web ページを想像してください。

Web ページに制限なしでクリップボードの読み取りを許可すると、さらに面倒になります。ユーザーは、パスワードや個人情報などの機密情報をクリップボードにコピーすることが多く、ユーザーが気付かないうちにどのページからでも読み取ることができます。

多くの新しい API と同様、navigator.clipboard は HTTPS 経由で提供されるページのみをサポートします。悪用を防ぐため、クリップボードへのアクセスは、ページがアクティブなタブにある場合にのみ許可されます。アクティブなタブ内のページは、許可を要求せずにクリップボードに書き込むことができますが、クリップボードからの読み取りには常に許可が必要です。

作業を容易にするために、コピーと貼り付けのための 2 つの新しい権限が Permissions API に追加されました。クリップボード書き込み権限は、ページがアクティブなタブにあるときに自動的に付与されます。クリップボードからデータを読み取る場合は、クリップボード読み取り許可を求める必要があります。

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

権限 API を使用する他のものと同様に、アプリにクリップボードと対話する権限があるかどうかを確認できます:

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

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

以下はクリップボードですここで、Board API の「非同期」部分が非常に役立ちます。クリップボード データの読み取りまたは書き込みを試行すると、許可がまだ付与されていない場合、自動的にユーザーに許可を求めるプロンプトが表示されます。 API は Promise ベースであるため、ユーザーがクリップボードのアクセス許可を拒否した場合、Promise は拒否されるため、ページは適切に応答できます。

Chrome では、ページが現在アクティブなタブである場合にのみクリップボード アクセスが許可されるため、DevTools に直接貼り付けると、この時点のタブでは DevTools 自体がアクティブであるため、ここにある例の一部は正しく実行されないことがわかります。 (ページはアクティブなタブではありません)。トリックがあります。 setTimeout を使用してクリップボードへのアクセスを延期し、関数を呼び出す前にページ内をすばやくクリックしてフォーカスを取得する必要があります。

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

Review

非同期の導入の前にクリップボード API では、Web ブラウザーでさまざまなコピー アンド ペーストの実装を混合しました。

ほとんどのブラウザでは、document.execCommand('copy') を使用して、ブラウザ独自のコピー アンド ペースト document.execCommand('paste') をトリガーできます。コピーするテキストが DOM に存在しない文字列である場合は、それを DOM に挿入して選択する必要があります。

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.');
  }
})

繰り返しますが、新しい Async をサポートせずに参照する方法は次のとおりです。クリップボード API 貼り付けられたコンテンツはサーバーで処理されます:

From: 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);
})

Internet Explorer では、window.clipboardData を通じてクリップボードにアクセスすることもできます。ユーザー ジェスチャ (クリック イベントなど) 内でアクセスが発生した場合 (責任ある方法で許可を要求する一環として)、許可プロンプトは表示されません。

検出とフォールバック

すべてのブラウザをサポートしている間、機能検出を使用して非同期クリップボードを活用することをお勧めします。 navigator.clipboard:

をチェックすることで、非同期クリップボード API のサポートを検出できます。

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基础教程》

以上がJavaScript 非同期クリップボード API を見てみましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。