JavaScript flash复制库类 Zero Clipboard
更新时间：2011年01月17日 22:48:27 作者：
开发中经常会用到复制的功能，在 IE 下实现比较简单。但要想做到跨浏览器比较困难了。
本文将介绍一个跨浏览器的库类 Zero Clipboard 。它利用 Flash 进行复制，所以只要浏览器装有 Flash 就可以运行，而且比 IE 的 document.execCommand(“Copy”) 更加灵活。
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("复制成功！");
});
好了，就介绍到这里吧。赶快自己试验下吧。
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("复制成功！");
});
好了，就介绍到这里吧。赶快自己试验下吧。
您可能感兴趣的文章:
相关文章
MinIO是一款基于Go语言的高性能对象存储服务,非常适合于存储大容量非结构化的数据,例如图片、视频、日志文件、备份数据和容器/虚拟机镜像等,这篇文章主要给大家介绍了关于前端使用minio传输文件的相关资料,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了JS的拖拽属性draggable详解,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
这篇文章主要为大家详细介绍了JS实现简易图片自动轮播，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
这篇文章主要介绍了JavaScript 俄罗斯方块游戏,结合实例形式详细分析了JavaScript 俄罗斯方块游戏原理、实现步骤及相关操作注意事项,需要的朋友可以参考下2020-04-04
MIF是由Pitney Bowes Software开发的一种文本格式,用于存储地理空间数据,它通常与地图可视化和地理信息系统（GIS）相关联,MIF文件通常成对出现,本文给大家介绍了javascript加载导出 MIF文件示例,需要的朋友可以参考下2024-12-12
最近通过javascript这门语言,然后结合html的来写一个简单的小游戏 ,这篇文章主要给大家介绍了关于JavaScript实现像素鸟小游戏的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要给大家总结介绍了关于javascript中的一些奇葩的日期换算方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
有些页面加载起来比较慢,为了加强用户体验效果,所以一般都会做一个页面加载等待的提示,页面加载完成后消失,下面这篇文章主要给大家介绍了关于uniapp自定义页面跳转loading的实现代码,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了JS项目中对本地存储进行二次的封装,这里我们将要使用到的key存储下来，新建一个叫constant-storage.js的文件，对外暴露一些key的键名，也方便后期统一修改，这里因为都是恒量，所以名称我们都用大写表示，需要的朋友可以参考下2022-07-07
下面小编就为大家带来一篇JS中正则表达式只有3种匹配模式(没有单行模式)详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
最新评论