ZeroClipboard的时代或许已经过去了
2019独角兽企业重金招聘Python工程师标准>>>
曾经,一个网页上要用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;
,却发现复制功能失效了,所以这里需要注意一下...
作者博客:百码山庄
转载于:https://my.oschina.net/mailzwj/blog/517496
ZeroClipboard的时代或许已经过去了相关推荐
- 区块链社交时代 或许永远不会到来
据CCN消息,Facebook收购了由伦敦大学学院研究人员创立的区块链公司Chainspace.据称,Chainspace是"一个行星级智能合约平台",该平台使用"分布式 ...
- 使用lucce分词怎么_深度学习时代,分词真的有必要吗
前言 中文数据集是我一直尽量避免的问题,但生活所迫,毕竟咱还是要在国内混江湖的,于是,最近开始研究研究深度学习模型在中文数据集上的各种表现, 但随之而来的一个问题是: 我真的需要分词吗? 香侬科技在 ...
- Oracle 中国研发中心裁员已成定局,云时代下一个是谁?
2019年5月7日,甲骨文(Oracle)召开了中国区电话会议,亚太区人力资源负责人明确了裁员的计划,而且这是全球性.至此,过去几个月一直在传闻的大裁员正式开始了. 据甲骨文内部员工透露,此次主要裁撤 ...
- XP时代的结束是阵痛还是真痛
今天是2014年的4月8日,是美国微软对XP操作系统服务的最后一天,这一天的到来已经酝酿了很久,事实上在好多年前就有微软的通知,从对非法XP用户的蓝屏行动到今天的彻底停止引发了中国2亿XP用户的反响, ...
- 支付宝账单的背后,大数据时代“芳华”隐现
不出意外,支付宝的年度账单再度刷爆朋友圈.同往年的支付宝账单不同的是,今年的支付宝账单有了一项2018年预测的内容,而正是这个内容将人们内心压抑已久的虚荣心点燃,最终演变成为一场席卷整个朋友圈的晒图风 ...
- 微信打赏功能暗示内容付费时代渐近
微信打赏功能暗示内容付费时代渐近 据爆料,目前,微信正在内测公众号"打赏"功能,被打赏的公众账号作者将会获得读者的"小费",微信团队已邀请了一批公众号参与&qu ...
- 支付宝三年投入30亿推进刷脸支付,靠脸吃饭的时代要来了?
人脸识别技术能否被硬件厂商量产的各类硬件设备应用? 现在来看,相关业务已在进程中,国内相关硬件正以肉眼可见的速度落地到相关场景中,诸如零售.金融,甚至医疗等领域,目前已有相关应用. 4月17日,在北京 ...
- 折叠屏、5G手机频发背后:物联网时代的角色畅想
2月21日凌晨,三星在美国发布了其首款折叠屏手机.作为真正实现量产并预告4月发售的厂商,业内评价目前为止,这算是折叠屏手机的最优表现,也将是今年折叠屏出货量最大的一家厂商. 回看近期发布的旗舰机型配置 ...
- 2022或许又是一个全新的开始
写之前思考了不少,确实没想起来要总结哪些,翻了翻之前写的,却发现去年竟然没有写.回想回想,去年生产问题苦逼了3天哪里会想起来写这个. 今年怎么说成果还可以吧,达到的效果远远超过了预期,只是与科技渐行渐 ...
最新文章
- lighttpd+PHP安装
- CodeForces - 1324F Maximum White Subtree(树形dp)
- html中写随机数,为HTML生成一个随机数
- html表单提交后显示,javascript – 在表单提交后在页面上显示消息
- elasticsearch部署
- 基于JAVA+SpringMVC+Mybatis+MYSQL的眼镜店仓库管理系统
- 西门子for循环例子_理解JavaScript中的循环缺陷和迭代协议
- KinectFusion: Real-time 3D Reconstruction and Interaction Using a Moving Depth Camera
- 如果有一天不做程序员了,还能入什么行业?
- Linux-Ubuntu安装QQ 微信 TIM 百度网盘
- android7.1.2 xposed,安卓7.1 xposed框架
- windows7 上搭建NFS服务器--haneWIN
- 前端页面插入Flash动画
- Python 算法之 动态规划详解
- UEFI安装win10+manjaro双系统
- mysql 触发器很慢_mysql之视图、触发器、事物、存储过程、函数、流程控制、索引与慢查优化...
- 钉钉网页版入口,存档
- 取代 Ant:使用 Maven 管理 Wowza 插件开发
- 看了个文章,说7z压缩文件损坏后无法恢复。建议使用zip/rar格式
- 博客样式(动态背景线条跟随鼠标移动)
热门文章
- options请求_前端数据请求的终极方案
- python 一行_一行 Python 代码搞定炫酷可视化
- python爬取小说内容_使用python爬取小说全部内容
- android 蓝牙设置平板电脑,java – BlueCove,笔记本电脑和带蓝牙的Android平板电脑
- c语言输入一段字符,C语言实现输入一个字符串后打印出该字符串中字符的所有排列...
- python list map成员排序_python – 同时对多个列表进行排序
- linux下后缀为so的文件怎么打开,linux中.so后缀的文件怎么使用啊
- java document select_javasript 操作option select
- python 画系统关联图_Python基于pyecharts实现关联图绘制
- C语言3中方法判断32还是64位机