異なるブラウザ間で JavaScript でテキストをクリップボードに確実にコピーするにはどうすればよいですか?

JavaScript でのクリップボードへのコピー: マルチブラウザーによるアプローチ

テキストをクリップボードにコピーするには、さまざまなブラウザー API を利用する必要があります。この記事では、次の 3 つの主要な方法に焦点を当てます。

1.非同期クリップボード API: [navigator.clipboard.writeText]
Chrome 66 でリリースされた非同期クリップボード API は、クリップボードへの非同期アクセスを提供します。 Promise を使用して、ユーザー プロンプトが JavaScript の実行を中断しないようにします。この方法には HTTPS が必要で、Chrome 66 の非アクティブなタブがサポートされます。

2. document.execCommand('copy') (非推奨)
2015 年以降、ほとんどのブラウザーで利用可能ですが、このメソッドは同期であり、JavaScript の実行をブロックします。 DOM からテキストをコピーし、クリップボードに置きます。一部のブラウザでは、プロセス中に許可のプロンプトが表示される場合があります。

3.コピー イベントのオーバーライド
この高度なテクニックを使用すると、コピー イベントに基づいてクリップボードに表示される内容を変更できます。クリップボードへのコピーに直接対応していないため、ここでは説明しません。

一般的な開発ノート

• クリップボードの操作では通常、ページがアクティブであるか、またはページがアクティブである必要があります。ユーザーの操作が必要です。
• 2020 年 2 月現在、クロスオリジン IFRAME と IFRAME サンドボックスにより、一部のブラウザで動作するサンプル コード。

非同期フォールバック アプローチ

ブラウザ間の互換性を確保するには、ドキュメントにフォールバックする非同期アプローチの使用を検討してください。古いブラウザの場合は execCommand('copy'):

function copyTextToClipboard(text) {
  if (!navigator.clipboard) {
    fallbackCopyTextToClipboard(text);
    return;
  }
  navigator.clipboard.writeText(text).then(() => {
    console.log('Async: Copying to clipboard was successful!');
  }, (err) => {
    console.error('Async: Could not copy text: ', err);
  });
}

以上が異なるブラウザ間で JavaScript でテキストをクリップボードに確実にコピーするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。