コンテンツをclipboard_html/css_WEB-ITnoseにコピーするための主要なブラウザと互換性のあるjsのシンプルな実装

Web サイトの記事には複数のボタンを提供する必要があるため、クリックして記事のコンテンツをクリップボードにコピーします。

インターネットで多くのコンテンツを検索したところ、非常に乱雑であることがわかりました。ここで整理して皆さんと共有します

レンダリングは次のとおりです:

以前は window.clipboardData.setData を使用しました。 、IE と Firefox のみをサポートします。 360ブラウザも総合も他のブラウザもみんな泣いてました。そこでZeroClipboardを勉強してjsコードを使って書いてみました。

使用前に次の 3 つの内容を引用してください (アップロード用の添付ファイルは提供されないため、ダウンロード アドレスはここでは提供されません。これは非常に一般的です。自分で見つけることができます):

jquery-1.4.1.min.js
ZeroClipboard.js
ZeroClipboard.swf

以下は最も単純な実装です。説明してください。

原則

非表示の Adob​​e Flash ムービー要素を DOM 要素上に配置します。ユーザーが DOM 要素をクリックすると、実際には非表示の Adob​​e Flash ムービー要素をクリックすることになり、Flash コードによってコンテンツがクリップボードにコピーされます。

注: js を使用してフラッシュ上のクリック イベントをシミュレートする場合、コンテンツをクリップボードにコピーすることはできません。その理由は、ブラウザとフラッシュのセキュリティ制限です。

ラベルはボタンであり、画像などに置き換えることができますが、ID は以下の Clip.glue("copy_text"); と一致している必要があります。

clip.setText(AddContent+ document.getElementById("id_div").innerText + AddContent); この文の di_div はコピーされる Div の ID です。この ID は他のタグの ID にすることもできます。コピーしたいものの ID を書き込むだけです。

その他すべてをそのままコピーします。変更する必要があるのは、最初の 2 行です。通常、これは Web ページに既に存在するタグです。彼のIDを設定するだけです。その後、最初の行を削除できます。 2 行目は、以下の ID であれば、ハイパーリンクまたは画像を使用できます。

事前に用意した3つのファイルを、コードに示されているパスにアップロードしてください。これはサーバー上で実行されると言われており、テストのためにサーバーに直接アップロードしました

これは最も単純化されたコードです。インターネット上の混乱は本当に見るに耐えないので、作成したらすぐにみんなに共有します。この記事に関してご質問がある場合は、ブログにメッセージを残してください。

実装されたコードは次のとおりです:

<div id="id_div">文本内容</div><br><a href='#' id="copy_text" title="以纯文本形式复制">复制文章纯文本内容</a><br><script type="text/javascript" src="/js/global/jquery-1.4.1.min.js"></script><script type="text/javascript" src="/js/global/ZeroClipboard.js"></script><script type="text/javascript">var clip = null;ZeroClipboard.setMoviePath("/js/global/ZeroClipboard.swf");$(document).ready(function(){    var AddContent = "\r\n本原创文章来源：C++技术网，阅读更多原创精品文章，欢迎访问C++技术网。\r\n";  clip = new ZeroClipboard.Client();  clip.setHandCursor(true);  clip.setText(AddContent+ document.getElementById("id_div").innerText + AddContent);  clip.glue("copy_text");  clip.addEventListener("complete", function(){    alert("文章纯文本内容已经复制到剪切板！");  });});</script>