clipboard.js设置复制当前页面的网址 分享给朋友

clipboard.js设置复制当前页面的网址 分享给朋友如何实现呢?
 
使用clipboard.js来复制网页文本内容,clipboard.js不需要flash,也不依赖其它的js库,min版仅11KB,GZIP压缩后仅3KB,非常的小巧。
 
一.设置html代码
<a title="复制链接" href="javascript:;" id="copy-btn" data-clipboard-text="__ROOT__/" class="copyBtn"></a>
二.引入clipboard.js
 
<script src="__TMPL__/public/assets/js/clipboard.min.js"></script>
三.写js代码, 触发复制按钮
 
<script>
$(function(){
//复制当前网址
var current_href=location.href;
$("#copy-btn").attr("data-clipboard-text",current_href);
var btn = document.getElementById('copy-btn');
var clipboard = new ClipboardJS(btn);
clipboard.on('success', function(e) {
alert("复制成功!将链接发给朋友吧!");
e.clearSelection();
});
clipboard.on('error', function(e) {
alert("复制失败!");
});
})
</script>
四.效果如下

QQ截图20190409213050.png

 

0 个评论

要回复文章请先登录注册