JavaScript flash复制库类 Zero Clipboard


Posted in Javascript onJanuary 17, 2011

本文将介绍一个跨浏览器的库类 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 : [主页] [下载] [演示]
核心功能
第一步,导入 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 是一个跨浏览器的事件绑定函数。详情请见4个跨浏览器必备的函数 。
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 相关文章推荐
AlertBox 弹出层信息提示框效果实现步骤
Oct 11 Javascript
打造基于jQuery的高性能TreeView(asp.net)
Feb 23 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
May 12 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
Jul 01 Javascript
WEB前端设计师常用工具集锦
Dec 09 Javascript
浅谈document.write()输出样式
May 07 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
JS获取当前页面名称的简单实例
Aug 19 Javascript
jQuery实现文字自动横移
Jan 08 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 Javascript
带你快速理解javascript中的事件模型
Aug 14 Javascript
js布局实现单选按钮控件
Jan 17 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
Jan 17 #Javascript
js 数据类型转换总结笔记
Jan 17 #Javascript
简短几句 通俗解释javascript的闭包
Jan 17 #Javascript
javascript 内存回收机制理解
Jan 17 #Javascript
javascript 延迟加载技术(lazyload)简单实现
Jan 17 #Javascript
关于COOKIE个数与大小的问题
Jan 17 #Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
Jan 17 #Javascript
You might like
php代码把全角数字转为半角数字
2007/12/10 PHP
PHP开发过程中常用函数收藏
2009/12/14 PHP
php与Mysql的一些简单的操作
2015/02/26 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
javascript比较文档位置
2008/04/08 Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
2010/04/15 Javascript
理解Javascript_03_javascript全局观
2010/10/11 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
setInterval,setTimeout与jquery混用的问题
2013/04/08 Javascript
js获取当前日期代码适用于网页头部
2013/06/27 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
2016/01/25 Javascript
Highcharts学习之坐标轴
2016/08/02 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
2019/05/18 Javascript
vue 实现微信浮标效果
2019/09/01 Javascript
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
在项目vue中使用echarts的操作步骤
2020/09/07 Javascript
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python 实现取矩阵的部分列,保存为一个新的矩阵方法
2018/11/14 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
瑜伽服装品牌:露露柠檬(lululemon athletica)
2017/06/04 全球购物
积极贯彻学习两会精神总结
2014/03/17 职场文书
和谐社区口号
2014/06/19 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
运动员入场前导词
2015/07/20 职场文书
2016优秀教师先进个人事迹材料
2016/02/25 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书
分析ZooKeeper分布式锁的实现
2021/06/30 Java/Android
Win11筛选键导致键盘失灵怎么解决? Win11关闭筛选键的技巧
2022/04/08 数码科技