ZeroClipboard,竟然无法在Google Chrome浏览器中使用-阿里云开发者社区

开发者社区> 开发与运维> 正文

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

简介: 版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/78367000 事情是非常让人不爽的,本来看起来挺简单的ZeroClipboard,我怎么就是搞不定。
版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/78367000

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

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

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

一、Firefox上的实现效果

这里写图片描述

这里写图片描述

这里写图片描述

二、实现方式

在GitHub上下载 ZeroClipboard https://github.com/zeroclipboard/zeroclipboard.

放在工作目录中如下图:

这里写图片描述

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

在页面中引入ZeroClipboard.js。

<script type="text/javascript" src="${ctx}/components/zeroclipboard/ZeroClipboard.js"></script>

同时放上一个按钮。

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

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

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

<script type="text/javascript">
<!--
    $(function() {
        $("button.clipboard", $p).each(function() {

        var $this = $(this);
        var clip = new ZeroClipboard($this);

        clip.on('error', function(event) {
            $this.hide().before(event.message);
            ZeroClipboard.destroy();
        });
    });
    });
//-->
</script>

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


接下来是时候去关注一下我的公众号了!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章