Heim > Artikel > Web-Frontend > Das JQuery-zClip-Plug-in implementiert das Kopieren von Seiteninhalten in die Datei „clipboard_jquery“.
Ich glaube, dass jeder beim Surfen im Internet oft auf diese Funktion stößt. Ich habe vorher nicht viel darauf geachtet, wie man sie implementiert, bis sie im Projekt benötigt wurde.
Endeffekt:
Nachdem ich viel im Internet gesucht habe, ist es nicht unmöglich, einfach die js-Methode zu verwenden, aber aufgrund der unterschiedlichen Sicherheitsmechanismen jedes Browsers ist es nicht browserübergreifend. Ich habe mehrere häufig verwendete Websites überprüft und alle verwenden transparentes Flash, um die Schaltfläche „In die Zwischenablage kopieren“ zu verdecken. Wenn Sie also auf „In die Zwischenablage kopieren“ klicken, klicken Sie tatsächlich auf Flash und kopieren dann den Inhalt, den Sie kopieren müssen . Es wird an Flash übergeben und dann wird der eingehende Inhalt über die Kopierfunktion von Flash in die Zwischenablage kopiert.
Laden Sie die JQuery-Bibliothek und das Zclip-Plug-in
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> <script src="js/jquery.zclip.min.js"></script>
Das Folgende ist eine kleine Demo, die hauptsächlich den Link im Textfeld in die Zwischenablage kopiert.
HTML
<input type="text" value="www.jb51.net" id="link"> <span id="copyBtn">复制链接</span>
Dann fügen Sie das Skript
hinzu
<script> $('#copyBtn').zclip({ path: "ZeroClipboard.swf", copy: function(){ return $('#link').val(); } }); </script>
Dann können Sie die Webseite direkt zum Testen öffnen. Dies ist nur eine einfache kleine Anwendung. Ich hoffe, dass jeder sie schnell beherrschen kann.