html怎么实现复制链接,clipboard.js实现复制链接功能

本文介绍了如何在现代浏览器中实现复制链接的功能,对比了原生javascript和Zero Clipboard库的不足,并推荐使用clipboard.js。clipboard.js是一个轻量级的库,不需要依赖Flash,但不支持IE8及以下浏览器。通过四步即可完成复制功能的实现,包括引入库文件、定义选择器、创建按钮和编写JS代码。此外,还解决了clipboard.js可能存在的二次点击生效问题。
摘要由CSDN通过智能技术生成

现有的常用方案有两种:

一:使用原生javascript中window.clipboardData实现复制到剪贴板功能;

二:使用Zero Clipboard库;

方案一仅支持ie浏览器,在firefox,chrome浏览器上则不起作用。

方案二ZeroClipboard是一个用于剪贴板复制的 JS 插件,它是基于 Flash 来实现跨浏览器的复制功能的,所以只支持安装了flash的浏览器。在现代浏览器中,flash逐渐没落,firefox浏览器默认不开启flash,所以Zero Clipboard在兼容方面也表现不佳。

那么,对于复制到剪切板这种简单的操作有没有一种实现简单,兼容性良好的解决方案呢?

有的!那就是github上的开源项目clipboard.js,它不需要依靠flash以及其他框架(但不支持IE8及以下浏览器)。下面举例使用clipboard实现复制当前元素链接功能:

target-div

复制链接

function copyUrl(){

var layer = layui.layer;

var _val=document.location.href;

console.log(document.location.href);

var clipboard = new ClipboardJS('#copyUrl', {

text: function() {

layer.alert('复制成功!', {icon: 1});

return _val;

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值