文档章节

ZeroClipboard的时代或许已经过去了

Mr.Zheng
 Mr.Zheng
发布于 2015/10/15 13:30
字数 1077
阅读 180
收藏 2

曾经,一个网页上要用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;,却发现复制功能失效了,所以这里需要注意一下...

作者博客:百码山庄

© 著作权归作者所有

Mr.Zheng
粉丝 53
博文 22
码字总数 38792
作品 0
杭州
网页/平面设计
私信 提问
ZeroClipboard2.0 复制功能

https://github.com/zeroclipboard/zeroclipboard/blob/master/docs/instructions.md https://github.com/zeroclipboard/zeroclipboard/blob/master/docs/api/ZeroClipboard.Core.md The Zer......

shaohan
2014/08/06
16.3K
2
ZeroClipboard,竟然无法在Google Chrome浏览器中使用

版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/78367000 事情是非常让人不爽的,本来看起来挺简单的ZeroClipboard,我怎么就是搞不定。折腾了将...

qing_gee
2017/10/27
0
0
js ZeroClipboard 拷贝文本到剪贴板

简述: 使用ZeroClipboard 在浏览器中需要拷贝文本到剪贴板 非IE浏览器不能直接 拷贝,所以使用ZeroClipboard来进行拷贝 代码: html [html] view plaincopy <a href="javascript:copyUrl('...

mrliuze
2015/11/09
16
0
ZeroClipboard的一个难题。

先像大家推荐个插件ZeroClipboard(http://code.google.com/p/zeroclipboard/)。 是一个拷贝复制的插件。 想在一堆输出上加上个弹框。试了好久,都没有成功。技术实在是太菜了。大家不忙的时候...

enjoylife
2011/05/13
2.2K
0
Lua基础 编译、运行、错误处理

尽管Lua是一门解析型的语言,但是在运行前也会被编译成某个中间状态。一门解析型的语言需要编译,这听起来有点不合常理。但是,实际上,解析型语言的与众不同,不是说它不需要编译,而是说它...

80后小子
2014/10/17
2
0

没有更多内容

加载失败,请刷新页面

加载更多

c++ 虚基类

c++ 虚基类 p556

天王盖地虎626
19分钟前
12
0
Java中的面向对象

一、面向对象 面向对象和面向过程的区别 过程就是函数,就是写方法,就是方法的一种实现。 对象就是将函数,属性的一种封装。用人们思考习惯的方式思考问题。 如何自定义类 修饰符 类名{ //成...

zhiruochujian
27分钟前
3
0
k8s删除Terminating状态的命名空间

背景: 我们都知道在k8s中namespace有两种常见的状态,即Active和Terminating状态,其中后者一般会比较少见,只有当对应的命名空间下还存在运行的资源,但是该命名空间被删除时才会出现所谓的...

Andy-xu
30分钟前
20
0
seata源码阅读笔记

seata源码阅读笔记 本文没有seata的使用方法,怎么使用seata可以参考官方示例,详细的很。 本文基于v0.8.0版本,本文没贴代码。 seata中的三个重要部分: TC:事务协调器,维护全局事务和分支...

东都大狼狗
43分钟前
7
0
Rust:最小化窗口后 CPU占用率高 (winit,glutin,imgui-rust)

最近试着用 imgui-rust 绘制界面,发现窗口最小化后CPU占用会增大。 查询的资料如下: https://github.com/rust-windowing/winit/issues/783 https://github.com/ocornut/imgui/issues/1151 ...

reter
47分钟前
23
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部