saber 酱的抱枕

Fly me to the moon

03/10
2015
学习

使用ZeroClipboard进行复制的简单示例

众所周知,使用js来复制网页内容存在浏览器兼容问题,而ZeroClipboard通过flash来将完成复制,算是解决了这个问题。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>ZeroClipboard复制功能简单测试</title>
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="ZeroClipboard.js"></script>
</head>
<body>
	<input type="text" name="wantCopy" id="wantCopy" value="" style="display: none;"/>
	<button id="copyButton">复制当前网址</button>
	<script type="text/javascript">
		document.getElementById("wantCopy").value=window.location.href;
	</script>
	<script type="text/javascript">
		$(function(){
			init();
		});
		function init() {
			var clip = new ZeroClipboard.Client(); // 新建一个对象
			clip.setHandCursor( true );
			clip.setText($('#wantCopy').val()); // 填写要复制的内容的id
			clip.addEventListener( "mouseUp", function(client) {
				alert("复制网址成功!");
			});
			// 最后注册用来复制的button按钮,参数为 id。点击这个 button 就会复制。
			//这个 button 不一定要求是一个 input 按钮,也可以是其他 DOM 元素。
			clip.glue("copyButton"); // 和上一句位置不可调换
		}
	</script>
</body>
</html>

查看demo

首先下载ZeroClipboard,解压后把文件放到web环境中,建议放在同一个文件夹下,这样无需再设置swf文件的路径。之后在代码中引入jq和ZeroClipboard.js,再给要复制的内容和复制按钮分别设置id。最后再填写js代码中的参数就完成了。

注意:由于用到了flash,只有在web环境下测试才会成功。更复杂的功能和更多参数可以再搜索。

当我发现这个方法之后,留心之下发现了很多网站都是用这个或是类似的方法。比如百度网盘分享文件时,也是用flash来做的:

百度网盘分享按钮

使用ZeroClipboard进行复制的简单示例

    1. saber酱 文章作者
      UnknownUnknownUnknownUnknown

      我这要是能算技术那也好了 <img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/15/j_org.gif" /> js用到的话我就找找资料什么的,算是积累吧。

      回复