ZeroClipboard的时代或许已经过去了
2015-10-15 13:30
543 查看
曾经,一个网页上要用Javascript实现网页内容的复制,其实是很麻烦的一件事情。虽然在这个问题上IE有其高大上的
The ZeroClipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie and a JavaScript interface.
ZeroClipboard曾盛极一时,而如今它的未来,恐怕令人担忧。随着HTML5的风靡,Flash在网页应用中的地位受到了极大的冲击,甚至有很多人都认为Flash正在慢慢淡出网页开发者的世界,而事实也的确如此。不仅如此,自Chrome 43版本发布,增加
下面配上ZeroClipboard的方法绑定就大功告成了!
我们预览页面,在文本框中输入任意字符,点击
然后,我们使用
接着,我们在浏览器中浏览,和使用ZeroClipboard时一样的去操作,效果是一样的。但是,这段代码的正确执行是有限制的,因为
最后,再补充说明一下,使用
考虑到实际使用中,我们可能需要复制一些非编辑区域提供的内容(比如:一个a标签的链接地址等),所以增加了一个过渡的texearea,似乎更保险,更灵活一些。
此外,我再测试过程中,曾试图将过渡的那个textarea设置为不可见的
作者博客:百码山庄
window.clipboardData方法支持直接复制指定内容,Firefox也早早的支持了
document.execCommand命令,但是因为早期的Chrome不支持浏览器直接操作剪贴板,或者说不支持
document.execCommand命令,让这一功能在兼容性上遇到了瓶颈。所以,聪明的开发者们开始走上“曲线救国”的道路:借助各大浏览器对Flash的支持,通过Javascript与Flash交互,将需要复制的内容传递到Flash中,再调用Flash操作剪切板的命令将内容复制到剪贴板,从而实现了兼容性极强的通过JS脚本复制网页文本的插件。这也就是ZeroClipboard的使命。
The ZeroClipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie and a JavaScript interface.
ZeroClipboard曾盛极一时,而如今它的未来,恐怕令人担忧。随着HTML5的风靡,Flash在网页应用中的地位受到了极大的冲击,甚至有很多人都认为Flash正在慢慢淡出网页开发者的世界,而事实也的确如此。不仅如此,自Chrome 43版本发布,增加
document.execCommand命令支持,更让ZeroClipboard的地位严重受到威胁。为什么这么说呢?下面我们一步一步来说明。
ZeroClipboard使用案例
通常情况下,ZeroClipord的应用场景大致是通过点击一个按钮复制一段指定的或用户输入的文本,HTML结构简单的做如下描述:<input type="text" name="" id="J_TextIn" value="Copy Test."> <input type="button" value="Copy" id="J_DoCopy"> <script src="dist/ZeroClipboard.min.js"></script>
下面配上ZeroClipboard的方法绑定就大功告成了!
(function(){ var btn = document.getElementById('J_DoCopy'), text = document.getElementById('J_TextIn'), zc = new ZeroClipboard(btn); zc.on('beforecopy', function(e){ zc.setText(text.value); }); })();
我们预览页面,在文本框中输入任意字符,点击
Copy按钮,文本框中输入的内容就被复制到剪贴板中了。我们可以在任意可写区域使用
Ctrl+V或鼠标右键将内容进行粘贴。该案例可完美兼容各主流浏览器,包括IE6/7/8等骨灰级浏览器。
现在不使用ZeroClipboard我们也能实现
首先,我们保证页面结构不变,但不在引入ZeroClipboard插件:<input type="text" name="" id="J_TextIn" value="Copy Test."> <input type="button" value="Copy" id="J_DoCopy">
然后,我们使用
document.execCommamd来对内容进行复制:
(function(){ var btn = document.getElementById('J_DoCopy'), text = document.getElementById('J_TextIn'); btn.onclick = function(){ var transfer = document.getElementById('J_CopyTransfer'); if (!transfer) { transfer = document.createElement('textarea'); transfer.id = 'J_CopyTransfer'; transfer.style.position = 'absolute'; transfer.style.left = '-9999px'; transfer.style.top = '-9999px'; document.body.appendChild(transfer); } transfer.value = text.value; transfer.focus(); transfer.select(); document.execCommand('Copy', false, null); }; })();
接着,我们在浏览器中浏览,和使用ZeroClipboard时一样的去操作,效果是一样的。但是,这段代码的正确执行是有限制的,因为
document.execCommand在Chrome中支持的比较晚,所以要求Chrome版本必须是43及以后。
最后,再补充说明一下,使用
document.execCommand来实现复制内容时,过渡被复制内容的
textarea标签(即:动态创建的那个textarea标签),在复制可输入区域(input:text,textarea)的内容时并不是必须的,可以直接简化为:
(function(){ var btn = document.getElementById('J_DoCopy'), text = document.getElementById('J_TextIn'); btn.onclick = function(){ text.focus(); text.select(); document.execCommand('Copy', false, null); text.blur(); }; })();
考虑到实际使用中,我们可能需要复制一些非编辑区域提供的内容(比如:一个a标签的链接地址等),所以增加了一个过渡的texearea,似乎更保险,更灵活一些。
此外,我再测试过程中,曾试图将过渡的那个textarea设置为不可见的
visibility:hidden;,却发现复制功能失效了,所以这里需要注意一下...
作者博客:百码山庄
相关文章推荐
- zeroclipboard 单个复制按钮和多个复制按钮的实现方法
- ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
- 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题
- document.execCommand()的用法小结
- 关于使用ZeroClipboard解决跨浏览器复制到剪贴板的问题
- 兼容所有浏览器的js复制插件Zero
- ZeroClipboard 实现批量复制 的Javascript正确代码!
- ZeroClipBoard 兼容IE浏览器的 多个复制
- ZeroClipboard—ZeroClipboard的使用
- 浏览器剪切版及ZeroClipboard.js的使用
- 复制剪贴板功能
- 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题
- 吐槽做得很不错的ZeroClipboard
- js复制文本到剪贴板,使用ZeroClipboard
- [ZeroClipboard] 跨浏览器复制到剪贴板
- ZeroClipboard2.0 复制功能 (同一页面多个复制按钮)
- javascript处理json/base64等数据并且下载成本地json/image文件(angular环境、execCommand)
- 【前端库】zeroclipboard 零剪贴板 放弃吧!皮卡丘
- ZeroClipboard2.2.0版本跨浏览器复制(兼解决IE下兼容问题)
- 浏览器复制插件zeroclipboard使用指南