ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript がさまざまなブラウザーでコピー関数コードを実装する方法の詳細な説明

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

伊谢尔伦
リリース: 2017-07-22 15:03:53
オリジナル
2135 人が閲覧しました

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

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['@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 です。フラッシュに転送され、システムのクリップボードにコピーされます。
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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート