Implémentation simple de js compatible avec les principaux navigateurs pour copier le contenu dans clipboard_jquery

Étant donné que les articles du site Web doivent fournir plusieurs boutons, cliquez pour copier le contenu de l'article dans le presse-papiers.

J'ai cherché beaucoup de contenu sur Internet et j'ai trouvé que c'était assez compliqué. Ici, je vais le trier et le partager avec tout le monde

Le rendu est le suivant :

J'utilisais auparavant window.clipboardData.setData, qui ne prenait en charge que IE et Firefox. 360 Browser, Sogou et d'autres navigateurs étaient tous en larmes. Par conséquent, j'ai étudié ZeroClipboard et j'ai essayé d'utiliser du code js pour l'écrire.

Citez trois choses avant utilisation (aucune pièce jointe de téléchargement n'est fournie, donc l'adresse de téléchargement n'est pas fournie ici. C'est très courant. Vous pouvez trouver une fille par vous-même) :

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

Ce qui suit est la mise en œuvre la plus simple, veuillez l'expliquer.

Principe

Placez un élément vidéo Adobe Flash invisible sur un élément DOM. Lorsque l'utilisateur clique sur l'élément DOM, il clique en fait sur l'élément vidéo Adobe Flash invisible et le code Flash copie le contenu dans le presse-papiers.

Remarque : Si vous utilisez js pour simuler un événement de clic sur le flash, vous ne pouvez pas copier le contenu dans le presse-papiers. La raison réside dans les limitations de sécurité des navigateurs et de Flash.

La balise a est un bouton. Vous pouvez la remplacer par une image, etc., mais l'ID doit être cohérent avec clip.glue("copy_text");

clip.setText(AddContent document.getElementById("id_div").innerText AddContent); Le di_div dans cette phrase est l'ID du Div à copier. Cet identifiant peut être l'identifiant d'autres balises. Écrivez simplement l'ID de ce que vous souhaitez copier.

Copiez le reste tel quel. Ce que vous devez modifier, ce sont les deux premières lignes. La première ligne est la balise qui doit être copiée. Généralement, elle existe déjà sur votre page Web. Définissez-lui simplement une pièce d'identité. Ensuite, la première ligne peut être supprimée. Vous pouvez utiliser la deuxième ligne à votre guise. Vous pouvez utiliser un lien hypertexte ou une image, à condition que l'identifiant soit le même que celui ci-dessous.

Pour les trois fichiers préparés à l'avance, veuillez les télécharger sur le chemin indiqué dans le code. On dit que cela ne fonctionne que sur le serveur. Je l'ai directement téléchargé sur le serveur pour le tester

C'est le code le plus simplifié. Le désordre sur Internet est vraiment insupportable à regarder, donc je le partagerai avec tout le monde dès que je le ferai. Si vous avez des questions sur cet article, vous pouvez laisser un message sur le blog.

Voici le code implémenté :

<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>