Web サイトの記事にはいくつかのボタンが必要なため、クリックして記事のコンテンツをクリップボードにコピーします。
インターネットで多くのコンテンツを検索したところ、非常に乱雑であることがわかりました。ここで整理して皆さんと共有します。
レンダリングは次のとおりです:
以前は window.clipboardData.setData を使用していましたが、これは IE と Firefox のみをサポートしていました。 360ブラウザ、Sogou、その他のブラウザはみんな泣いていました。そこでZeroClipboardを勉強してjsコードを使って書いてみました。
使用前に 3 つのことを引用してください (アップロード用の添付ファイルは提供されないため、ダウンロード アドレスはここには提供されません。これは非常に一般的です。女の子は自分で見つけることができます):
jquery-1.4.1.min.js
ZeroClipboard.js
ZeroClipboard.swf
以下は最も単純な実装です。説明してください。
原則
非表示の Adobe Flash ムービー要素を DOM 要素に配置します。ユーザーが DOM 要素をクリックすると、実際には非表示の Adobe 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>