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 相关文章推荐
用jscript实现列出安装的软件列表
Jun 18 Javascript
javaScript复制功能调用实现方案
Dec 13 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
Apr 11 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
Jun 09 Javascript
JavaScript中计算网页中某个元素的位置
Jun 10 Javascript
判断是否存在子节点的实现代码
May 18 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
Jun 22 Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
three.js实现圆柱体
Dec 30 Javascript
npm的lock机制解析
Jun 20 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
Oct 09 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
解析isset与is_null的区别
2013/08/09 PHP
PHP根据传来的16进制颜色代码自动改变背景颜色
2014/06/13 PHP
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
2011/04/27 Javascript
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
2015/09/24 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
JS实现区分中英文并统计字符个数的方法示例
2018/06/09 Javascript
vue脚手架搭建项目的兼容性配置详解
2018/07/17 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
vue 移动端注入骨架屏的配置方法
2019/06/25 Javascript
策略模式实现 Vue 动态表单验证的方法
2019/09/16 Javascript
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
11个并不被常用但对开发非常有帮助的Python库
2015/03/31 Python
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
对numpy Array [: ,] 的取值方法详解
2018/07/02 Python
python实现AES加密与解密
2019/03/28 Python
pandas删除指定行详解
2019/04/04 Python
Python argparse模块应用实例解析
2019/11/15 Python
Python字典底层实现原理详解
2019/12/18 Python
python实现飞行棋游戏
2020/02/05 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
英国办公用品商店:Office Outlet
2018/04/04 全球购物
工程造价管理专业大专生求职信
2013/10/06 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP
centos7安装mysql5.7经验记录
2022/05/02 Servers