ZeroClipBoard多复制按钮实现（转）

最新推荐文章于 2025-08-14 17:31:00 发布

kising

最新推荐文章于 2025-08-14 17:31:00 发布

阅读量153

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/kising/article/details/84436274

javascript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用ZeroClipboard和Flash实现在网页上多个复制按钮的功能。通过预先加载一个透明的Flash对象，并根据需要动态绑定事件，可以有效地为多个按钮提供复制功能，同时减少内存消耗。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网上能搜索到的例子大部分都是基于单复制按钮来实现的，如果一个页面中有好多个复制按钮，就不好搞了。

如图：

这个解决方案得原理是：

拿js动态加载一个透明flash.然后遮盖到你要点击得按钮上面,之后在给这个flash得承载元素上绑定事件动态把要复制得值传递到flash中,用flash访问剪切板.

这时候就出现这么一个问题多个按钮如果每个按钮都加栽一遍flash得话会很吃内存并且动态得代码也不是很好写

最后得解决方案如下：

1. 现在Body中放置一个隐藏得flash容器 绝对定位层

<div id="ClipSwf" style="left:-1000px;position:absolute;width:80px;height:25px;" ></div>

2.使用js在页面加载完成得时候初始化剪切板的对象并设置鼠标手势和承载容器然后把flash输出成html输出到容器中。

var clipManage = {
	clip: null,
	ClipContainer: null,
	InitClip: function() {
		page.clip = new ZeroClipboard.Client();
		page.ClipContainer = $("#ClipSwf");
		page.clip.setHandCursor(true);
		page.clip.setCSSEffects(true);
		page.clip.addEventListener('complete', function (client){
        	$.messager.alert('提示：', '复制完成!', 'info');
        });
		page.ClipContainer.html(page.clip.getHTML(55, 22));
	},
	SetClipValue: function(obj, idx){
		var row = $('#hisList').datagrid('selectRow', idx).datagrid('getSelected');
		var offset = $(obj).offset();
		page.ClipContainer.offset({left: offset.left, top: offset.top});
		page.clip.setText(row.cdnPath);
	}
}

3.在各个复制按钮上动态绑定事件并把响应的要复制得值或者控件传递到function中之后设置隐藏flash容器得left,top边距让其漂浮在触发该事件得按钮上并把要复制的值通过

Clip.setText('text') (插件提供得方法) 传递给flash 这样就实现了多个按钮复制得功能

<a href="javascript:;" id="copyurl'+rowData.id+'" onmouseover="page.SetClipValue(this, ' + rowIndex + ')">复制</a>

参考：

使用ZeroClipboard解决跨浏览器复制到剪贴板的问题

Js+Flash实现剪切板操作(页面多个复制按钮)