JavaScript がさまざまなブラウザーでコピー関数コードを実装する方法の詳細な説明-jsチュートリアル-php.cn

JavaScript がさまざまなブラウザーでコピー関数コードを実装する方法の詳細な説明

伊谢尔伦

リリース： 2017-07-22 15:03:53

オリジナル

2140 人が閲覧しました

各ブラウザのコピー機能のサポートを確認してください:

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、通过document对象实现复制:先选择中文本，再执行复制命令 
//txtObj.select(); 
//document.execCommand("Copy"); // 仅IE支持，Firefox报语法错误，chrome执行结果返回false(不支持) 
//3、通过TextRange对象实现现复制：可以不用先选中内容 
txtObj.createTextRange().execCommand("Copy"); 
} 
}

ログイン後にコピー

2. Firefox、インターフェイスメソッドを通じて実装されています。Firefox はセキュリティを目的としています。その理由は、このインターフェイスは 17 以降のバージョンでは閉じられており、バージョン 17 以前では使用できるためです。コードは次のとおりです:

var clip = Components.classes[&#39;@mozilla.org/widget/clipboard;1&#39;].createInstance(Components.interface.nsIClipboard);

ログイン後にコピー

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

var clip = new ZeroClipboard.Client(); // 新建一个clip对象 
clip.setHandCursor( true ); // 设置鼠标为手型 
clip.setText("hello,world"); // 设置要复制的文本，可以为文本框的值 
clip.glue("copy-botton"); // 为clip注册一个按钮，参数为按钮元素的id，点击按钮就可以实现复制

ログイン後にコピー

4> Zero Clipboard の一般的に使用されるメソッド、ソースコードを直接表示することをお勧めします:

reposition(): ページサイズが変更されたときに Flash ボタンが配置されなくなるのを防ぐため
hide(): Flash ボタンを非表示にする
show(): Flash ボタンを表示する
setCSSEffects(): Flash オクルージョンボタンスタイルの失敗の問題を解決します (:hover を .hover に変更します)。
5>ゼロクリップボードの共通イベント。イベント処理関数は addEventListener():
load: フラッシュボタンのロードイベント
mouseOver: マウス上移動イベント
mouseOut: マウス移動アウトイベント
mouseDown: マウスダウンイベント
mouseUp: マウスリリースイベント
完了: コピー成功イベント

以上がJavaScript がさまざまなブラウザーでコピー関数コードを実装する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。