Js+Flash实现访问剪切板操作


Posted in Javascript onNovember 20, 2012

最近需要遇到了这个问题点击按钮复制链接的功能果断度娘谷哥。最后找到得解决方案ZeroClipBoard一款开源得js+Flash实现得剪切板操作
但是搜寻了众多例子之后发现大多都是介绍一个页面只有一个固定的复制操作
Js+Flash实现访问剪切板操作
而我得需求是这样
一个动态Repeater动态加载出各个地址和复制按钮。
这个解决方案得原理是:
拿js动态加载一个透明flash.然后遮盖到你要点击得按钮上面,之后在给这个flash得承载元素上绑定事件动态把要复制得值传递到flash中,用flash访问剪切板.
这时候就出现这么一个问题多个按钮如果每个按钮都加栽一遍flash得话会很吃内存并且动态得代码也不是很好写
最后得解决方案如下:

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

1.现在Body中放置一个隐藏得flash容器绝对定位
varLocalUrlManage={ 
Clip:null, 
ClipContainer:null, 
InitClip:function(){ 
LocalUrlManage.Clip=newZeroClipboard.Client(); 
LocalUrlManage.ClipContainer=$("#ClipSwf"); 
LocalUrlManage.Clip.setHandCursor(true); 
LocalUrlManage.Clip.setCSSEffects(true); 
LocalUrlManage.Clip.addEventListener("complete",function(client,text){ 
Tip.RightTip("#UrlAdd",text+","+"复制成功!"); 
}); 
LocalUrlManage.ClipContainer.html(LocalUrlManage.Clip.getHTML(80,25)); 
}}

2.使用js在页面加载完成得时候初始化剪切板的对象并设置鼠标手势和承载容器然后把flash输出成html输出到容器中
onmouseover="LocalUrlManage.SetClipValue(this,'#copyUrlValue<%#Eval("Id")%>')">点击复制</button>

SetClipValue:function(obj,SelectorEl){ 
//BrowserClip.IEClip($(SelectorEl).val()); 
varoffset=$(obj).offset(); 
LocalUrlManage.ClipContainer.offset({left:offset.left,top:offset.top}); 
LocalUrlManage.Clip.setText($(SelectorEl).val()); 
}.

3.在各个复制按钮上动态绑定事件并把响应的要复制得值或者控件传递到function中之后设置隐藏flash容器得left,top边距让其漂浮在触发该事件得按钮上并把要复制的值通过
Clip.setText('text')(插件提供得方法)传递给flash这样就实现了多个按钮复制得功能
未解决问题,原本按钮得hovercss切换效果flash遮盖之后就不太灵活了。用jquery动态添加样式效果也不太好。
Javascript 相关文章推荐
javascript 判断整数方法分享
Dec 16 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
May 12 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
mac上配置Android环境变量的方法
Jul 08 Javascript
JS实现随机生成10个手机号的方法示例
Dec 07 Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
vue两组件间值传递 $router.push实现方法
May 15 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 Javascript
微信小游戏中three.js离屏画布的示例代码
Oct 12 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
Nov 19 #Javascript
jQuery 数据缓存模块进化史详细介绍
Nov 19 #Javascript
基于jquery库的tab新形式使用
Nov 16 #Javascript
jquery getScript动态加载JS方法改进详解
Nov 15 #Javascript
javascript 图片裁剪技巧解读
Nov 15 #Javascript
中国地区三级联动下拉菜单效果分析
Nov 15 #Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
Nov 15 #Javascript
You might like
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
为PHP5.4开启Zend OPCode缓存
2014/12/26 PHP
php session的锁和并发
2016/01/22 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/02/09 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
详解使用Node.js 将txt文件转为Excel文件
2017/07/05 Javascript
React Native验证码倒计时工具类分享
2017/10/24 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
十分钟教你上手ES2020新特性
2020/02/12 Javascript
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python读取键盘输入的2种方法
2015/06/16 Python
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
python numpy元素的区间查找方法
2018/11/14 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
python生成特定分布数的实例
2019/12/05 Python
python字典按照value排序方法
2020/12/28 Python
卫校毕业生自我鉴定
2013/10/31 职场文书
个人简历中自我评价
2014/02/11 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
《悯农》教学反思
2014/04/28 职场文书
学习保证书
2015/01/17 职场文书
欢迎词怎么写
2015/01/23 职场文书
教师年度考核个人总结
2015/02/12 职场文书
排球赛新闻稿
2015/07/17 职场文书
婚宴来宾致辞
2015/07/28 职场文书
党性教育心得体会(共6篇)
2016/01/21 职场文书
Python使用scapy模块发包收包
2021/05/07 Python