jquery zclip复制页面的链接或者文本内容

最新推荐文章于 2023-06-27 11:13:49 发布

原创最新推荐文章于 2023-06-27 11:13:49 发布 · 4.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web #jquery插件

在项目中需要实现复制网页链接功能，选择使用jQuery-zclip插件。该插件是基于jQuery的，能解决跨浏览器兼容问题，但需Flash支持。使用时要注意CSS的`:hover`和`:active`状态。基本操作包括下载jQuery、jquery.zclip.js和ZeroClipboard.swf文件，然后在HTML中设置路径、待复制内容及复制前后回调函数。提供`show`、`hide`和`remove`三个方法来控制复制功能的显示、隐藏和移除。

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

最近做项目需要复制网页中的链接的功能，于是网上各种找方法，最后发现zclip挺好用的，用的人也多，于是就拿来试试了。

jQuery-zclip是一个复制内容到剪贴板的jQuery插件，使用它我们不用考虑不同浏览器和浏览器版本之间的兼容问题。

jQuery-zclip插件需要Flash的支持，使用时记得安装Adobe Flash Player。

还有一点非常重要的，本来想放到最后的，为了醒目，就放在这里了，Zclip的官网有这样一句话：

“support for CSS ":hover" and ":active" states，所以我们一定要保证有hover和active哦。

先来写下最基本的操作吧。

首页，需要下载资源包，jQuery文件，jquery.zlicp.js 还有ZeroClipboard.swf。

然后就可以开始写代码啦，开始喽

html中：

<div class="copy_div">
    <input type="text" class="url_input" value="http://localhost:8090/wx/index.jsp" >
    <a href="javascript:void(0)" id="cp-btn" class="btn btn-primary">复制链接</a>
</div>

js复制代码：

$("#cp-btn").zclip({
<span style="white-space:pre">	</span>path:'${ctx}/resources/js/ZeroClipboard.swf', //记得把ZeroClipboard.swf引入到项目中 
	copy:function(){
	    return $(this).prev("url_input").val();
	},
	afterCopy: function(){
	    tishi(1500, "复制成功");
	}
});

配置说明
path:swf的路径(复制主要是用flash解决不同浏览器的复制)
copy:待复制的内容, 可以是静态内容, 也可以 return 动态内容
beforeCopy:复制之前要做的function;
afterCopy:复制之后要做的function;

提供了3个方法
show:$(selected).zclip('show');//复制功能有效
hide:$(selected).zclip('hide');//复制功能无效
remove:$(selected).zclip('remove');//完全移除复制功能

上面的这种写法，在一般的页面都是没有问题的，但是当我们要复制的内容是嵌套在dialog或者bootstrap 的modal中的时候，这种写法就不能使用了。

我们项目中有两个地方要用到复制地址的功能，其中一个就在普通的页面上，上面的方法就OK。但是还有一个是在bootstrap的modal中，试了很多方法都不行，我一直纠结了好久呢.........

终于，找到方法了，哈哈

原因是zclip初始化的时候，modal还没有load出来，所以可以放在modal的“shown”之后再初始化zclip。

但是如果还是用下载下来的js文件，我发现只能走到“copy”的方法中，但是不能真正的复制

所以我使用了bootstrap的zclip CDN，然后发现真的OK了，太神奇了

好了，不罗嗦啦，上代码：

<span style="font-size:18px;">$('#myModal').on('shown.bs.modal', function () {
	$("#copy_qcode").delay(250).queue(function(next){
	   	$(this).zclip('show');
		$(this).zclip({
	   		path: "http://cdn.bootcss.com/zclip/1.1.2/ZeroClipboard.swf",
	 		copy: function(){
	 		<span style="white-space:pre">	</span>return $(this).attr("data-href");
	 		},
	 		afterCopy:function(){
	 			window.top.tishi(1500,"复制成功");
	 		 }
		});
	});
});</span>

顺便补充一下：CDN的地址是：Bootstrap Zclip CDN