Clipboard.js:不用Flash实现剪贴板功能的轻量级JavaScript库

转载 2016年08月30日 20:55:45

转载于:http://www.infoq.com/cn/news/2015/10/clipboard-js-no-flash/

Zeno Rocha发布了一个专门用于从web页面向本地计算机的剪贴板复制文本的JavaScript库:Clipboard.js

在每一个Github仓库页面的侧边栏上都有一个小部件,用来显示repo的HTTPS克隆地址,当你点击紧挨着这个部件的按钮时,就会复制当前repo的URL到用户的剪贴板中。Github用JavaScript库ZeroClipboard来实现这一功能,问题是这个库是用一个不可见的Flash来完成剪贴操作,而Flash技术正被各大浏览器厂商冷落,所以势必要有一个新的方案。

在今年的早些时候,Firefox浏览器默认禁用了Flash,需要用户明确启用Flash才可以通过它向剪贴板中复制文本。

Mozilla Hacks上的一篇文章中示范了API document.execCommand()的使用方法。MDN的文档中称,execCommand“赋予了浏览器通过运行指令操作可编辑区域内容的能力。”直到Firefox 41发布,“cut”和“copy”指令才正式启用。

浏览器只允许用户主动触发这样的事件,不允许JavaScript代码随意将文本复制到剪贴板中,如果代码尝试越过用户自行复制,该调用会失败。

Rocha借鉴了一些思路:通过给execCommand传递参数指令来执行相关操作;集成Selection API。通过结合这些技术,Clipboard.js为开发者提供了一个集成了实用的API的多功能轻量级JavaScript库。如果想要将按钮与库绑定,开发者需要声明触发剪贴板的元素:


var clipboard = new Clipboard('.btn');

主流浏览器都支持这个库,Safari目前仍不支持cut和copy指令。

ZeroClipboard的开发者在讨论中声称也要在他们的库中加入相同的API的支持,当这些API不被支持时提供向后兼容的Flash功能。ZeroClipboard的贡献者James Green谈起Clipboard.js时说到:“它是一个很好的轻量级选择,但是我知道,很多用户的使用环境不是最新的主流浏览器,ZeroClipboard在向后兼容Flash的同时支持新的HTML5特性对这些用户来说至关重要。”

HTML5的剪贴板API的提案仍然处于议程中,在大多数浏览器只实现了部分支持

查看英文原文Lightweight JavaScript Library Offers Flash-Free Clipboard Integration


无需Flash无需依赖任何JS库实现文本复制与剪切

我们在网页上放置一个复制按钮,主要用来方便用户复制链接之类的复杂文本,以往的做法是,通过JS依靠Flash,甚至借助jQuery庞大的js库来实现文本复制到剪贴板的。今天我要给大家介绍的是一款极现代的...
  • zhou2081152
  • zhou2081152
  • 2016年08月10日 16:57
  • 514

js一键复制,Clipboard.js:不用Flash实现剪贴板功能的轻量级JavaScript库

Zeno Rocha发布了一个专门用于从web页面向本地计算机的剪贴板复制文本的JavaScript库:Clipboard.js。 在每一个Github仓库页面的侧边栏上都有一个小部件,用来显示...
  • u013216667
  • u013216667
  • 2016年05月27日 18:11
  • 1886

不依赖Flash 实现剪贴板复制

不依赖Flash 实现剪贴板复制
  • Dong_PT
  • Dong_PT
  • 2016年09月27日 11:23
  • 1677

向剪切板复制文本的js库——clipboard.js

首先,加载clipboard.js文件(我上网找的一个cdn):其次,html代码:
  • yCharlee
  • yCharlee
  • 2016年08月11日 15:55
  • 1143

12 个轻量级的 JavaScript 库

1. meSing.js meSing.js是一个一个JavaScript歌唱合成库,它使用Web Audio API的DSP功能与meSpeak.js语音合成库结合,为Web提供声乐合...
  • ejinxian
  • ejinxian
  • 2016年11月28日 10:42
  • 419

clipboard.js实现无flash复制内容到剪贴板

由于最近在写一个项目其中有一个功能是要实现将页面上的某一段内容复制到剪贴板上,当时想用ZeroClipboard.js+ZeroClipboard.swf的,奈何项目中有移动端部分,考虑到flash已...
  • yeguxin
  • yeguxin
  • 2016年08月17日 11:45
  • 540

js实现复制到剪贴板功能,兼容所有浏览器

前段时间做项目的时候,有点击按钮复制文本的需求,想使用操作windows剪切板实现,在网上查了些资料,发现目前好像只有IE支持直接访问剪切板,实现需求的时候也只做了IE中的点击复制功能,其余浏览器: ...
  • Goskalrie
  • Goskalrie
  • 2016年07月29日 14:21
  • 6861

年度技术盘点:50个最佳轻量级JavaScript框架和库

回顾今年已发布的JS框架和库,我们针对地筛选了一些能够提供直接和具体功能的免费JavaScript插件和库,与大家分享。它们可不是臃肿的一站式框架,而是一些轻量级,并能够帮助你更快、更容易地进行网页设...
  • goulei2010
  • goulei2010
  • 2016年12月30日 20:35
  • 1850

纯js实现复制到剪贴板功能

纯js实现复制到剪贴板功能 在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍。随着 HTML5 技术的发展,Flash 已经在很多场合不适用了,...
  • lhw413
  • lhw413
  • 2017年05月07日 21:46
  • 1003

clipboard.js 实现动态获取内容并复制到剪切板

使用背景: 项目组新重构的项目里面有利用zeroClipboard.js实现复制内容到剪切板的功能, 由于zeroClipboard.js依赖于Flash,而出于我所在公司的安全策略,大部分同事都没有...
  • cjFrontEnd
  • cjFrontEnd
  • 2017年10月25日 15:08
  • 727
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Clipboard.js:不用Flash实现剪贴板功能的轻量级JavaScript库
举报原因:
原因补充:

(最多只允许输入30个字)