JavaScriptコピー機能のブラウザサポート_JavaScriptスキルの実テスト

この 2 日間、Web フロントエンドで作業していたときに、js を介してテキストのコピーを実装する必要性が生じました。
ブラウザの互換性を無視して、各ブラウザのコピー機能のサポートを確認します。

1. IE ブラウザには 3 つの解決策があります。コードは次のとおりです。

コードをコピー コードは次のとおりです:

function copy(txtid){
var txtObj = document.getElementById (txtid) ;
if(window.clipboardData){ // このオブジェクトは IE のみがサポートしており、Firefox と chrome はサポートしていません
//1.clipboardData オブジェクト
//window.clipboardData を介してコピーします。 clearData();
//window.clipboardData.setData("Text",txtObj.value);

//2. 最初に中国語のテキストを選択し、次にcopy command
//txtObj .select();
//document.execCommand("Copy"); // IE でのみサポートされ、Firefox は構文エラーを報告し、Chrome の実行結果は false を返します (サポートされていません) )

//3. TextRange オブジェクトを渡すと即時コピーが実現されます。最初にコンテンツを選択する必要はありません。
txtObj.createTextRange().execCommand("Copy");
>}

2. Firefox、メソッド実装経由。セキュリティ上の理由から、Firefox はバージョン 17 以降ではこのインターフェースを閉じます。バージョン 17 以前で使用できます。コードは次のとおりです:

コードをコピー コードは次のとおりです:

var Clip = Components.classes['@ mozilla.org/widget/clipboard;1'].createInstance(Components.interface.nsIClipboard);

3. Chrome は、セキュリティ上の理由からユーザーにクリップボード操作を提供しません。コピー機能のサポートがブラウザー間で均一ではないことがわかります。
Zero Clipboard Library
jhuckaby によって作成された Zero Clipboard js ライブラリ。Flash を使用してコンテンツをクリップボードにコピーします。ブラウザに Flash プラグインが搭載されている限り、ActionScript は JavaScript の欠点をブロックし、ブラウザ間のコピーの互換性の問題を解決します。
Zero Clipboard の実装原理: Zero Clipboard は最初に Flash オブジェクト タグを生成し、実際にクリックされるのはボタンではなく、必要なコンテンツです。はフラッシュに転送され、フラッシュ コピーを介してシステム クリップボードに渡されます。
ゼロ クリップボードの使用方法
注: Flash 実装に基づいているため、セキュリティ上の理由から、Flash を Web コンテナ (Apache、Tomcat など) で実行する必要があります。Flash を直接開くとロードされません。ボタンが一時停止したアニメーションのようになります。インターネットでは、Flash 設定を右クリックして、ZeroClipboard.swf を信頼できる場所に追加すると機能するようですが、それでも機能しない可能性があります。私のローカルブラウザ。
1> Zero Clipboard の圧縮パッケージをダウンロードし、解凍して、ZeroClipboard.js と ZeroClipboard.swf の 2 つのファイルをプロジェクトに追加します。コード: ;
注: ZeroClipboard.js と ZeroClipboard.swf を同じパスに配置する必要があります。同じパス内にない場合は、ZeroClipboard.setMoviePath() を使用して設定できます。
3> 次のようにコードをコピーします:

コードをコピーします コードは次のとおりです:

var Clip = new ZeroClipboard.Client(); // 新しいクリップ オブジェクトを作成します

clip.setHandCursor( true ) // マウスをハンド タイプに設定します
clip.setText("hello,world "); // コピーを設定します テキストはテキスト ボックスの値にすることができます
clip.glue("copy-botton"); // クリップのボタンを登録します。パラメータはボタン要素の ID です。ボタンをクリックしてコピーします


4> ゼロ クリップボードの一般的なメソッド。ソース コードを直接表示することをお勧めします。
reposition(): ページ サイズが変更されたときに Flash ボタンの位置がずれるのを防ぎます。
hide(): Flash ボタンを非表示にします。
show(): Flash ボタンを表示します。
setCSSEffects(): 無効な Flash シールド ボタン スタイルの問題を解決します (:hover を .hover に変更します)。
5>ゼロ クリップボード共通イベント、イベント処理関数は addEventListener():
load: Flash ボタン読み込みイベント
mouseOver: マウス移動上イベント
mouseOut: マウス移動下イベント
mouseDown : マウス ダウン イベント
mouseUp: マウス リリース イベント
complete: コピー成功イベント

jquery.zclip ライブラリ
ZeroClipboard はネイティブ JavaScript 実装に基づいているため、jquery.zclip は jQuery を使用して Zero を実装しますクリップボード カプセル化の場合、プロジェクトで jQuery がすでに使用されている場合は、それを使用することをお勧めします。jquery.zclip の方がサイズが小さくなります。
jquery.zclip のダウンロード アドレス: http://www.steamdev.com/zclip/
Zero Clipboard のダウンロード アドレス: https://github.com/zeroclipboard/ZeroClipboard/releases
サンプルのダウンロード:
テストを容易にするために、jquery.zclip と Zero Clipboard で作成したサンプルを csdn にアップロードしました。サンプルは Web コンテナーで実行する必要があります。
デモのダウンロード アドレス