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的监听,这样防止浏览器不支持的时候没有提示。


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

相关文章
|
29天前
|
Web App开发 数据采集 存储
WebDriver与Chrome DevTools Protocol:如何在浏览器自动化中提升效率
本文探讨了如何利用Chrome DevTools Protocol (CDP) 与 Selenium WebDriver 提升浏览器自动化效率,结合代理IP技术高效采集微博数据。通过CDP,开发者可直接操作浏览器底层功能,如网络拦截、性能分析等,增强控制精度。示例代码展示了如何设置代理IP、cookie及user-agent来模拟真实用户行为,提高数据抓取成功率与稳定性。适用于需要频繁抓取互联网数据的应用场景。
138 3
WebDriver与Chrome DevTools Protocol:如何在浏览器自动化中提升效率
|
22天前
|
Web App开发 存储 前端开发
Chrome浏览器的跨域问题
Chrome浏览器的跨域问题
|
2月前
|
Web App开发 JSON 安全
【跨域难题终结者】:一键解锁Chrome浏览器神秘设置,彻底告别开发阶段的跨域烦恼!
【8月更文挑战第20天】跨域是前端开发常遇难题,尤其在前后端分离项目中。浏览器因安全考量会阻止不同源间的请求。本文对比CORS、JSONP、代理服务器等解法,并介绍开发阶段通过调整Chrome设置来临时禁用跨域限制的方法,提供启动Chrome及使用`fetch`API示例,适合快速测试。但请注意这不适用于生产环境,存在一定安全风险。
195 1
|
2月前
|
Web App开发
成功解决Chrome浏览器 控制台下看不到接口信息的问题
这篇文章提供了解决Chrome浏览器控制台不显示接口信息问题的方法,包括检查过滤设置和确保“保留日志”开关已打开。
成功解决Chrome浏览器 控制台下看不到接口信息的问题
|
2月前
|
Web App开发
Chrome浏览器导出HTTPS证书
Chrome浏览器导出HTTPS证书
43 0
Chrome浏览器导出HTTPS证书
|
2月前
|
Android开发 iOS开发 C#
Xamarin.Forms:从零开始的快速入门指南——打造你的首个跨平台移动应用,轻松学会用C#和XAML构建iOS与Android通用界面的每一个步骤
【8月更文挑战第31天】Xamarin.Forms 是一个强大的框架,让开发者通过单一共享代码库构建跨平台移动应用,支持 iOS、Android 和 Windows。使用 C# 和 XAML,它简化了多平台开发流程并保持一致的用户体验。本指南通过创建一个简单的 “HelloXamarin” 应用演示了 Xamarin.Forms 的基本功能和工作原理。
44 0
|
2月前
|
Web App开发 缓存 前端开发
哇塞!Chrome 浏览器竟有四大神秘进程,带你探秘互联网世界的强大引擎!
【8月更文挑战第31天】Chrome浏览器因其快速稳定的表现深受用户喜爱,其背后是四大独特多进程架构的支持:浏览器主进程管理界面与进程协调;网络进程处理网络请求及缓存;渲染进程将网页内容转化为可视化页面;插件进程则确保各类插件如Flash Player的安全稳定运行。通过这些进程间的高效协作,Chrome实现了流畅、稳定的上网体验。例如,在访问新闻网站时,各进程协同工作,确保网页内容顺利加载和显示。理解这些进程有助于提升使用体验并有效解决问题。
46 0
|
4月前
|
Web App开发 前端开发 JavaScript
Chrome 浏览器中执行 JavaScript
Chrome 浏览器中执行 JavaScript
236 0
|
2月前
|
Web App开发
Chrome——谷歌浏览器chrome如何模拟其他客户端
Chrome——谷歌浏览器chrome如何模拟其他客户端
86 1
Chrome——谷歌浏览器chrome如何模拟其他客户端
|
2月前
|
Web App开发 前端开发 JavaScript
手摸手教你,从0到1开发一个Chrome浏览器插件
开发 Chrome 插件既有趣又具成就感。本教程将引导你从零开始,逐步创建一个简单的 Chrome 插件。首先了解 Chrome 插件是可增强浏览器功能的小程序。以一个基础示例开始,你将学习如何设置开发环境,包括安装 Chrome 和准备文本编辑器,并掌握 HTML、CSS 和 JavaScript 的基础知识。接着,我们将构建插件的基本结构,涉及 `manifest.json` 配置文件、`background.js` 后台脚本、`popup.html` 用户界面以及 `style.css` 样式表。
187 8
下一篇
无影云桌面