ZeroClipboard 复制html页面内容到粘贴板

作者:じ☆ve宝贝

发布时间:2015-09-09T10:19:44

ZeroClipboard

使用场景:

当我做邀请好友模块的时候无法避免点击copy邀请链接,虽然js可以实现,但是会有一个特别恶心的让用可以允许的提示。ZeroClipboard可以完美解决这个问题,接下来就是我给大家带来的例子!

代码部分
	<input type="text" id="content" value="这里是要复制的内容" />
	<input id="copy" type="button" data-clipboard-target="content" value="复制">
	<script type="text/javascript" src="js/ZeroClipboard.min.js" ></script>
	<script type="text/javascript">
	// 将【复制】按钮充当复制数据的元素载体
	var clip = new ZeroClipboard( document.getElementById("copy") );
	</script>

以上就是引入并使用 ZeroClipboard 的最简代码。我们为【复制】按钮指定了data-clipboard-target属性,其值为将被复制数据的元素id。此时,我们点击【复制】按钮就可以复制id为content的textarea中的文本数据。

关于文件引入和本地化使用
上面我们引入的JS文件是 ZeroClipboard 官方提供的 CDN,你可以直接使用。如果你想将其下载到本地服务器上使用,你可以进入官方网站下载最新版本。然后将dist目录下的ZeroClipboard.js(或者压缩版的ZeroClipboard.min.js)和ZeroClipboard.swf这两个文件上传到自己的服务器即可。
请确保它们被放在同一目录下,以便于 ZeroClipboard.js 自动加载 ZeroClipboard.swf 文件。否则你需要在使用前额外配置swf文件的路径。
// 在 new ZeroClipboard()之前,需要先配置 ZeroClipboard.swf 文件的路径
ZeroClipboard.config( { swfPath: 'http://YOURSERVER/path/ZeroClipboard.swf' } );

事件处理

ZeroClipboard 还为我们提供了事件支持,以便于处理ZeroClipboard触发的各种事件。ZeroClipboard支持的事件有"ready"、 "beforecopy"、 "copy"、 "aftercopy"、 "destroy"、 "error"。
我们可以通过on()方法来注册事件处理函数。
// 当Flash SWF文件加载完成并准备就绪时触发ready事件
	clip.on("ready", function(){ alert("加载完成!"); });

// 当触发copy事件时,设置用于复制的文本数据
	clip.on("copy", function(e){
		e.clipboardData.setData("text/plain", "这里是用于复制的纯文本数据")
	});

此外,off()方法用来取消注册的事件处理函数,emit()方法用来手动触发事件。其用法与jQuery的on()、 off()、 trigger()方法非常相似。

此外,如果你有多个ZeroClipboard对象,你想为它们都注册事件处理函数。你可以使用全局对象ZeroClipboard的静态方法ZeroClipboard.on()、 ZeroClipboard.off()、 ZeroClipboard.emit()来全局性地设置事件。全局事件将对每个对象都生效。