ZeroClipboard，竟然无法在Google Chrome浏览器中使用

亦凉 2021-05-10 11:18 514阅读 0赞

事情是非常让人不爽的，本来看起来挺简单的ZeroClipboard，我怎么就是搞不定。折腾了将近一下午的时间，发现同样的代码在Firefox浏览器上运行ZeroClipboard就是正常的，而Google Chrome浏览器却无法实现copy的功能！

让我先抱怨两句吧，在GitHub上找了各种版本的ZeroClipboard，也在百度上搜了各种解决办法，发现人家的例子都在Firefox浏览器上运行正常，而我的程序在Google Chrome浏览器上怎么都没有复制粘贴的效果。人都要气炸了，最后才后知后觉的发现是浏览器兼容的问题——那既然事实这样的凄惨，为什么网络上其他的资源都说ZeroClipboard是跨浏览器的，它解决了复制粘贴在浏览器各种版本不兼容的问题？

当然了，既然能在Firefox浏览器上实现复制粘贴，还是需要把这个方案介绍给需要的方案，接下来就是如何在Google Chrome浏览器上安装Adobe flash的插件。

## 一、Firefox上的实现效果 ##

![这里写图片描述][SouthEast]

![这里写图片描述][SouthEast 1]

![这里写图片描述][SouthEast 2]

## 二、实现方式 ##

在GitHub上下载 ZeroClipboard [https://github.com/zeroclipboard/zeroclipboard][https_github.com_zeroclipboard_zeroclipboard].

放在工作目录中如下图：

![这里写图片描述][SouthEast 3]

注意：ZeroClipboard.swf和ZeroClipboard.js在一个路径下。

在页面中引入ZeroClipboard.js。

同时放上一个按钮。

<button class="btn btn-block btn-primary btn-flat clipboard" data-clipboard-text="${ encode_shareUrl}">点击复制二维码地址</button>

注意：data-clipboard-text属性赋值后，ZeroClipboard在复制的时候会选择该值放在粘贴板中。

页面加载完毕时初始化复制的按钮。

最好，加上判断error的监听，这样防止浏览器不支持的时候没有提示。

--------------------

> 接下来是时候去关注一下我的公众号了！
> 
> ![20161224204853903][]

[SouthEast]: /images/20210506/e6c485f2b33e4190849fdea80f9f1454.png
[SouthEast 1]: /images/20210506/5b2a6efada5246628c3d3052ad1ded0e.png
[SouthEast 2]: /images/20210506/9c0152515a694bf4ae666338480ebca5.png
[https_github.com_zeroclipboard_zeroclipboard]: https://github.com/zeroclipboard/zeroclipboard
[SouthEast 3]: /images/20210506/79fed2b65b424a76af065e540d427b1c.png
[20161224204853903]: /images/20210506/a69bca3c4a5840b7ad27dc6e9d1647e8.png