Zero Clipboard js+swf实现的复制功能使用方法


Posted in Javascript onMarch 07, 2010

开发中经常会用到复制的功能,在 IE 下实现比较简单。但要想做到跨浏览器比较困难了。本文将介绍一个跨浏览器的库类 Zero Clipboard 。它利用 Flash 进行复制,所以只要浏览器装有 Flash 就可以运行,而且比 IE 的 document.execCommand("Copy") 更加灵活。

Zero Clipboard 的实现原理
Zero Clipboard 利用 Flash 进行复制,之前有 Clipboard Copy 解决方案,其利用的是一个隐藏的 Flash。但最新的 Flash Player 10 只允许在 Flash 上进行操作才能启动剪贴板。所以 Zero Clipboard 对此进行了改进,用了一个透明的 Flash ,让其漂浮在按钮之上,这样其实点击的不是按钮而是 Flash ,也就可以使用 Flash 的复制功能了。

如何使用 Zero Clipboard
首先下载 Zero Clipboard ,并解压缩。其中需要两个文件:ZeroClipboard.js 和 ZeroClipboard.swf ,将这两个文件放入到你的项目中。

下载地址
Zero Clipboard 开源的 JavaScript+flash 复制库类

演示地址:
http://demo.3water.com/js/ZeroClipboard/index.html

核心功能
第一步,导入 ZeroClipboard.js 文件:

<script type="text/javascript" src="ZeroClipboard.js"></script>
再设置 ZeroClipboard.swf 文件的路径:

ZeroClipboard.setMoviePath( "ZeroClipboard.swf" );
注意:以上 ZeroClipboard.js, ZeroClipboard.swf 两个文件的路径都需要替换为你项目中对应文件的路径。或者也可以是一个绝对路径。

然后就使用了:

var clip = new ZeroClipboard.Client(); // 新建一个对象 
clip.setHandCursor( true ); // 设置鼠标为手型 
clip.setText("哈哈"); // 设置要复制的文本。 
// 注册一个 button,参数为 id。点击这个 button 就会复制。 
//这个 button 不一定要求是一个 input 按钮,也可以是其他 DOM 元素。 
clip.glue("copy-botton"); // 和上一句位置不可调换

这样,这样基本功能实现了,点击按钮就可以复制设置好的文本了。你可能注意到了,待复制的文本是固定的,如果想要动态改变的怎么办,比如复制一个输入框中的内容。不用担心,下面会讲到的。

其他函数
Zero Clipboard 还提供了一些其他的函数,其中有一些非常有用。

reposition() 方法
因为按钮上漂浮有一个 Flash 按钮,所以当页面大小发生变化时,Flash 按钮可能会错位,这样就点不着了。 不要紧,Zero Clipboard 提供了一个 reposition() 方法,可以重新计算 Flash 按钮的位置。我们可以将它绑定到 resize 事件上。

bind(window, "resize", function(){ 
clip.reposition(); 
});

bind 是一个跨浏览器的事件绑定函数。
=========================================================
这个想必大家都已知道。IE 的事件绑定函数是 attachEvent;而 Firefox, Safari 是 addEventListener;Opera 则两种都支持。下面进行封装。
/************************************ 
* 添加事件绑定 
* @param obj : 要绑定事件的元素 
* @param type : 事件名称。不加 "on". 如 : "click" 而不是 "onclick". 
* @param fn : 事件处理函数 
************************************/ 
function bind( obj, type, fn ) { 
if ( obj.attachEvent ) { 
obj['e'+type+fn] = fn; 
obj[type+fn] = function(){obj['e'+type+fn]( window.event );} 
obj.attachEvent( 'on'+type, obj[type+fn] ); 
} else 
obj.addEventListener( type, fn, false ); 
}

例如添加一个页面点击事件:
bind(document, "click", function() { 
alert("Hello, World!!"); 
});

=========================================================
hide() 和 show() 方法
这两个方法可以隐藏和显示 Flash 按钮 。其中 show() 方法会调用 reposition() 方法。

setCSSEffects() 方法
当鼠标移到按钮上或点击时,由于有 Flash 按钮的遮挡,所以像 css ":hover", ":active" 等伪类可能会失效。setCSSEffects() 方法就是解决这个问题。首先我们需要将伪类改成类,比如:

#copy-botton:hover{ 
border-color:#FF6633; 
} 
// 可以改成下面的 ":hover" 改成 ".hover" 
#copy-botton.hover{ 
border-color:#FF6633; 
}

我们可以调用 clip.setCSSEffects( true ); 这样 Zero Clipboard 会自动为我们处理:将类 .hover 当成伪类 :hover 。

getHTML() 方法
如果你想自己实例一个 Flash ,不用 Zero Clipboard 的附着方法,那么这个方法就可以帮上忙了。它接受两个参数,分别为 Flash 的宽度和高度。返回的是 Flash 对应的 HTML 代码。例如:

var html = clip.getHTML( 150, 20 );
你可以用 innerHTML 或直接 document.write(); 进行输出。
以下是我测试下输出的 HTML 代码:

<embed id="ZeroClipboardMovie_1" src="zeroclipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="150" height="20" name="ZeroClipboardMovie_1" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&width=150&height=20" wmode="transparent" />
IE 的 Flash JavaScript 通信接口上有一个 bug 。你必须插入一个 object 标签到一个已存在的 DOM 元素中。并且在写入 innerHTML 之前请确保该元素已经 appendChild 方法插入到 DOM 中。

Zero Clipboard 事件处理
Zero Clipboard 提供了一些事件,你可以自定义函数处理这些事件。Zero Clipboard 事件处理函数为 addEventListener(); 例如当 Flash 完全载入后会触发一个事件 "load" 。

clip.addEventListener( "load", function(client) {
alert("Flash 加载完毕!");
});
Zero Clipboard 会将 clip 对象作为参数传入。即上例中的 "client" 。
还有 "load" 也可以写成 "onLoad",其他的事件也可以这样。

其他事件还包括:

mouseOver 鼠标移上事件
mouseOut 鼠标移出事件
mouseDown 鼠标按下事件
mouseUp 鼠标松开事件
complete 复制成功事件
其中 mouseOver 事件和 complete 事件比较常用。
前面说过,如果需要动态改变待复制的内容,那 mouseOver 事件就可以派上用场了。例如需要动态复制一个 id 为 test 的输入框中的值,我们可以在鼠标 over 的时候重新设置值。

clip.addEventListener( "mouseOver", function(client) {
var test = document.getElementById("test");
client.setText( test.value ); // 重新设置要复制的值
});
复制成功:

clip.addEventListener( "complete", function(){
alert("复制成功!");
});
好了,就介绍到这里吧。赶快自己试验下吧。

Javascript 相关文章推荐
限制文本框输入N个字符的js代码
May 13 Javascript
Js 随机数产生6位数字
May 13 Javascript
浅谈javascript 函数属性和方法
Jan 21 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 Javascript
js事件冒泡与事件捕获详解
Feb 20 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
Oct 26 Javascript
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 Javascript
Echarts地图添加引导线效果(labelLine)
Sep 30 Javascript
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
Mar 07 #Javascript
javascript实现面向对象类的功能书写技巧
Mar 07 #Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 #Javascript
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 #Javascript
Jquery Validation插件防止重复提交表单的解决方法
Mar 05 #Javascript
javascript下判断一个元素是否存在的代码
Mar 05 #Javascript
ExtJs扩展之GroupPropertyGrid代码
Mar 05 #Javascript
You might like
php中几种常见安全设置详解
2010/04/06 PHP
zf框架的session会话周期及次数限制使用示例
2014/03/13 PHP
简单分析ucenter 会员同步登录通信原理
2014/08/25 PHP
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
php使用CURL模拟GET与POST向微信接口提交及获取数据的方法
2016/09/23 PHP
PHP插件PHPMailer发送邮件功能
2017/02/28 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
2012/05/16 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
关于RequireJS的简单介绍即使用方法
2016/10/20 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
2016/12/17 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
2018/08/10 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
详解vue中$nextTick和$forceUpdate的用法
2019/12/11 Javascript
Python pass 语句使用示例
2014/03/11 Python
python解决网站的反爬虫策略总结
2016/10/26 Python
利用 python 对目录下的文件进行过滤删除
2017/12/27 Python
python中time库的实例使用方法
2019/10/31 Python
python实现银行实战系统
2020/02/26 Python
Python如何读取、写入CSV数据
2020/07/28 Python
详解Django关于StreamingHttpResponse与FileResponse文件下载的最优方法
2021/01/07 Python
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
学前班评语大全
2014/05/04 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
党校学习心得体会范文
2014/09/09 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
Python基础知识之变量的详解
2021/04/14 Python
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python