Einfache Implementierung von js, die mit den wichtigsten Browsern kompatibel ist, um Inhalte in die Datei „clipboard_jquery' zu kopieren

Da Website-Artikel mehrere Schaltflächen bereitstellen müssen, klicken Sie, um den Artikelinhalt in die Zwischenablage zu kopieren.

Ich habe viele Inhalte im Internet durchsucht und festgestellt, dass sie ziemlich chaotisch sind. Hier werde ich sie sortieren und mit allen teilen

Die Darstellung ist wie folgt:

Ich habe zuvor window.clipboardData.setData verwendet, das nur IE und Firefox unterstützte. 360 Browser, Sogou und andere Browser waren alle in Tränen aufgelöst. Deshalb habe ich ZeroClipboard studiert und versucht, es mit js-Code zu schreiben.

Zeigen Sie vor der Verwendung drei Dinge (es werden keine Upload-Anhänge bereitgestellt, daher wird die Download-Adresse hier nicht angegeben. Dies kommt sehr häufig vor. Sie können ein Mädchen selbst finden):

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

Das Folgende ist die einfachste Implementierung, bitte erläutern Sie sie.

Prinzip

Platzieren Sie ein unsichtbares Adobe Flash-Filmelement auf einem DOM-Element. Wenn der Benutzer auf das DOM-Element klickt, klickt er tatsächlich auf das unsichtbare Adobe Flash-Filmelement und der Flash-Code kopiert den Inhalt in die Zwischenablage.

Hinweis: Wenn Sie js verwenden, um ein Klickereignis auf dem Flash zu simulieren, können Sie den Inhalt nicht in die Zwischenablage kopieren. Der Grund sind Sicherheitsbeschränkungen von Browsern und Flash.

Das a-Tag ist eine Schaltfläche. Sie können es durch ein Bild usw. ersetzen, aber die ID muss mit clip.glue("copy_text"); übereinstimmen.

clip.setText(AddContent document.getElementById("id_div").innerText AddContent); Das di_div in diesem Satz ist die ID des zu kopierenden Div. Diese ID kann die ID anderer Tags sein. Geben Sie einfach die ID dessen ein, was Sie kopieren möchten.

Kopieren Sie den Rest so wie er ist. Was Sie ändern müssen, sind die beiden obersten Zeilen. Die erste Zeile ist das Tag, das kopiert werden muss. Im Allgemeinen ist es bereits auf Ihrer Webseite vorhanden. Legen Sie einfach eine ID für ihn fest. Anschließend kann die erste Zeile gelöscht werden. Sie können die zweite Zeile nach Belieben verwenden. Sie können einen Hyperlink oder ein Bild verwenden, sofern die ID mit der unten angegebenen übereinstimmt.

Laden Sie die drei im Voraus vorbereiteten Dateien bitte auf den im Code angegebenen Pfad hoch. Dies soll angeblich nur auf dem Server funktionieren. Ich habe es zum Testen direkt auf den Server hochgeladen

Dies ist der einfachste Code. Das Durcheinander im Internet ist wirklich unerträglich anzusehen, deshalb werde ich es mit allen teilen, sobald ich es geschafft habe. Wenn Sie Fragen zu diesem Artikel haben, können Sie eine Nachricht im Blog hinterlassen.

Das Folgende ist der implementierte Code:

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