JavaScript 非同期クリップボード API を見てみましょう-jsチュートリアル-php.cn

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' }

ログイン後にコピー

图0：JavaScript异步剪贴板 API

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

ログイン後にコピー