Saber 酱的抱枕

Fly me to the moon

03/10
2015
学习

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

saber 撰写 3条回复 2,352次查看

众所周知，使用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
Read More →

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