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

Web サイトの記事にはいくつかのボタンが必要なため、クリックして記事のコンテンツをクリップボードにコピーします。

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

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

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

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

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

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

原則

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

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

aタグは画像などに置き換えることができますが、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++技术网。
\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>