使用clipboard.js复制当前网页链接，避开clipboard.js点击两次才生效问题

选择方法

我的目标是在JS中复制当前网页链接。网上找到的方法有3种。
第一种方法是document.execCommand(“Copy”); 这种方法我没有尝试，以前存在比较大的兼容性问题，后面随着该方法兼容性提高，其目前浏览器的兼容性如下：

该方法仍不推荐使用。

第二种方法是使用zeroclipboard插件。这是一款基于Flash的，兼容性较强的用于剪贴板复制的 JS 插件，它是基于 Flash 来实现跨浏览器的复制功能的。但是zeroclipboard插件有一个弊端，就是必须要用到一个flash文件，这无论是在插件的加载效率还是使用体验上，都是不够完美的。

第三种方法也就是这里要说到clipboard.js。

关于clipboard.js

不依赖flash, 不依赖其他框架，gzip压缩后只有3kb大小。这就是我选择clipboard.js的原因。
详细资料请参考clipboard.js中文网：http://www.clipboardjs.cn/.

具体使用

clipboard.js使用起来很方便，大部分的使用方法官网里面也有介绍。

引用clipboard.js

我选择的方法是从第三方CDN 那里获取资源。

复制当前网页链接

下面就是如何使用clipboard.js复制当前网页链接的代码：

<button class="btn"></button>

<!-- 引用clipboard.js -->
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script type="text/javascript">
	document.getElementsByClassName("btn")[0].onclick = function() {
		var clipboard = new ClipboardJS(this, {
			text: function() {
				return window.location.href;
			}
		});
		clipboard.on("success", function(e) {
			console.log("ok");
		});
		clipboard.on("error", function(e) {
			console.log("fail");
		});
	}
</script>

但是在使用时会发现有一个问题：需要点击两次才能成功复制。具体什么原因我也不是清楚（用setTimeOut()方法设置延时3秒执行试了一下，也不是代码时延问题）。网上看到解决方法都不是我想要的。在多次尝试中，我找到了我想要的那种方法。

解决clipboard.js点击两次才生效问题

既然它要第二次点击之后才能复制，那我就帮它多点击一次。

<button class="btn"></button>
	
<!-- 引用clipboard.js -->
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script type="text/javascript">
	document.getElementsByClassName("btn")[0].onclick = function() {
		var clipboard = new ClipboardJS(this, {
		    text: function() {
				return window.location.href;
			}
		});
		clipboard.on("success", function(e) {
			console.log("ok");
			clipboard.destroy();
		});
		clipboard.on("error", function(e) {
			console.log("fail");
		});
		this.click();  //解决clipboard二次点击生效问题
		clipboard.destroy();
	}
</script>

要注意clipboard.destroy()的使用，this.click()和clipboard.destroy()这两行代码的执行顺序必须是先this.click()后clipboard.destroy()。我们点击后第一次生成的clipboard对象必须要用clipboard.destroy()清除。我们生成的辅助点击事件生成的第二个clipboard对象可以不清除(也就是clipboard.on(“success”)里面的clipboard.destroy())也能达到同样效果。当然，清除它只想更加精确地管理 DOM 的生命周期。

好了，问题就这样解决了。第一次写博客，只是想到这个问题想通了之后虽然简单，但是可能会想一段时间，就说说自己的解决方法。