曾经,一个网页上要用Javascript实现网页内容的复制,其实是很麻烦的一件事情。虽然在这个问题上IE有其高大上的 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的时代或许已经过去了的更多相关文章

  1. 玩转CSS3,嗨翻WEB前端,CSS3伪类元素详解/深入浅出[原创][5+3时代]

    在我的上一篇博客中, 很多园友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素 ...

  2. html5+css3实现跑动的爱心/动态水滴效果[原创][5+3时代]

    大风起兮云飞扬,安得猛士兮走四方!html5+css3,不学不行. 做web开发已经有好几年了,见证了太多语言的崛起和陨落. 其实作为一个程序员最苦逼的事情莫过于每天要不停的追赶各大公司新出的框架和语 ...

  3. Android Volley获取json格式的数据

    为了让Android能够快速地访问网络和解析通用的数据格式Google专门推出了Volley库,用于Android系统的网络传输.volley库可以方便地获取远程服务器的图片.字符串.json对象和j ...

  4. CSS 布局说——可能是最全的

    前言 现在,我们被称为前端工程师.然而,早年给我们的称呼却是页面仔.或许是职责越来越大,整体的前端井喷式的发展,使我们只关注了js,而疏远了css和html. 其实,我们可能经常在聊组件化,咋地咋地. ...

  5. 批处理版MPlayer播放器(甲兵时代原创批处理)(下)

    注意,由于空间不支持显示退格键,需要自己手动补上,方法如上图: 接上篇: 批处理版音视频播放器上(甲兵时代原创批处理) :Bc cls COLOR 2F echo. call :colour &quo ...

  6. (原创)大数据时代:基于微软案例数据库数据挖掘知识点总结(Microsoft 决策树分析算法)

    随着大数据时代的到来,数据挖掘的重要性就变得显而易见,几种作为最低层的简单的数据挖掘算法,现在利用微软数据案例库做一个简要总结. 应用场景介绍 其实数据挖掘应用的场景无处不在,很多的环境都会应用到数据 ...

  7. 或许你不知道的10条SQL技巧(转自58沈剑原创)

    这几天在写索引,想到一些有意思的TIPS,希望大家有收获. 一.一些常见的SQL实践 (1)负向条件查询不能使用索引 select * from order where status!=0 and s ...

  8. 站在风口,你或许就是那年薪20w+的程序猿

    最近面试了一些人,也在群上跟一些群友聊起,发现现在的互联网真是热,一些工作才两三年的期望的薪资都是十几K的起,这真是让我们这些早几年就成为程序猿的情何以堪!正所谓是站在风口上,猪也能飞起来!我在这里就 ...

  9. 【原创】新手入门一篇就够:从零开发移动端IM

    一.前言 IM发展至今,已是非常重要的互联网应用形态之一,尤其移动互联网时代,它正以无与论比的优势降低了沟通成本和沟通代价,对各种应用形态产生了深远影响. 做为IM开发者或即将成为IM开发者的技术人员 ...

随机推荐

  1. 大型系统OA--技术

    OA办公自动化系统--技术 1.由于涉及企业的流程控制与规则管理.所以系统对于规范要求的严谨性,导致在小型开发组在进行开发时必须基于成熟的技术架构.开源的lemon OA,采用了如下技术细节: mys ...

  2. 博弈论(SG函数):HNOI 2007 分裂游戏

    Description 聪聪和睿睿最近迷上了一款叫做分裂的游戏. 该游戏的规则试: 共有 n 个瓶子, 标号为 0,1,2.....n-1, 第 i 个瓶子中装有 p[i]颗巧克力豆,两个人轮流取豆子 ...

  3. HDU 5933 ArcSoft's Office Rearrangement 【模拟】(2016年中国大学生程序设计竞赛(杭州))

    ArcSoft's Office Rearrangement Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K ...

  4. java基础 (六)面向对象(一)

    这里有我之前上课总结的一些知识点以及代码大部分是老师讲的笔记 个人认为是非常好的,,也是比较经典的内容,真诚的希望这些对于那些想学习的人有所帮助! 由于代码是分模块的上传非常的不便.也比较多,讲的也是 ...

  5. vijosP1067Warcraft III 守望者的烦恼

    vijosP1067Warcraft III 守望者的烦恼 链接:https://vijos.org/p/1067 [思路] 矩阵乘法. 可以得出递推式:      f[i]=sum{ f[n-1], ...

  6. A Dicey Problem 骰子难题(Uva 810)

    题目描述:https://uva.onlinejudge.org/external/8/810.pdf 把一个骰子放在一个M x N的地图上,让他按照规定滚动,求滚回原点的最短路径. 思路:  记忆化 ...

  7. Eclipse自动换行WordWrap插件

    eclipse没有自动换行功能,需要安装插件wordwrap,方法请自行百度,可以参考下面的方法: http://jingyan.baidu.com/article/ce09321b7ba7042bf ...

  8. Python - 元组(tuple) 详解 及 代码

    元组(tuple) 详解 及 代码 本文地址: http://blog.csdn.net/caroline_wendy/article/details/17290967 元组是存放任意元素集合,不能修 ...

  9. ng-repeat 遍历同值数组导致的报错

    http://blog.csdn.net/tyust512/article/details/50370624

  10. vs2012关闭IDE硬件加速设置

    对于我这样的老古董电脑是很有必要的设置! 如图所示: