内容复制兼容性解决方案之ZeroClipboard

最新推荐文章于 2020-08-14 15:08:41 发布

原创最新推荐文章于 2020-08-14 15:08:41 发布 · 179 阅读

CC 4.0 BY-SA版权

文章标签：

26 篇文章

订阅专栏

本文深入探讨ZeroClipboard的实现原理、参数配置、API使用、支持的事件及改进方向，同时提供扩展阅读链接，帮助开发者全面掌握该技术并应用于实际项目。

Zero Clipboard

1、简介：

Jon Rohan编写的，目前已经开源到GitHub上面了，这个case也已经停止更新了,最新的版本是1.0.8。

2、实现原理：

依赖采用内置的Adoble Flash文件和一个js文件，会在绑定DOM元素上覆盖一个flash（采用z-index的方式）。

3、参数介绍：

4、api介绍：

新建一个ZeroClipboard对象：

var clip = new ZeroClipboard.Client():

如果flash文件有需求不与js文件同目录，可以用此api进行设置

"显示"flash的div

---------- 实质还是设置 div的位置，依附在elem的上面

“隐藏”flash的div

----------- 实质是设置div的left的值为-2000px

设置clipText为 newText

5、 支持的事件：

clip.addEventListener('load',function(){
      //flash加载完成
});

clip.addEventListener('mouseOver',function(){
	//鼠标移入
});

clip.addEventListener('mouseOut',function(){
	//鼠标移出
});

clip.addEventListener('mouseDown',function(){
	//点击
});

clip.addEventListener('mouseUp',function(){
	//松开
});

clip.addEventListener('complete',function(){
	//复制完成
});

6、 可以改进的地方：

$:function(thingy){
    //次api只是简单地支持了id
    if(typeof(thingy) == 'string'){
         thingy  = document.getElementById(thingy);
    }
}

支持更多元：

扩展阅读：