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(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 Javascript
javascript 保存文件到本地实现方法
Nov 29 Javascript
innerText和textContent对比及使用介绍
Feb 27 Javascript
当前页禁止复制粘贴截屏代码小集
Jul 24 Javascript
javascript实现dom元素可拖动
Mar 21 Javascript
Js 获取、判断浏览器版本信息的简单方法
Aug 08 Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
详解vue项目打包步骤
Mar 29 Javascript
layui插件表单验证提交触发提交的例子
Sep 09 Javascript
javascript实现数字时钟效果
Feb 06 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实现递归循环每一个目录
2010/08/08 PHP
php常用的安全过滤函数集锦
2014/10/09 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
给大家分享几个常用的PHP函数
2017/01/15 PHP
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
ASP Json Parser修正版
2009/12/06 Javascript
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
2013/05/07 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
JavaScript跨域调用基于JSON的RESTful API
2016/07/09 Javascript
jquery实现拖动效果
2016/08/10 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
2017/05/02 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
2017/06/28 Javascript
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
vue 挂载路由到头部导航的方法
2017/11/13 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
dataframe设置两个条件取值的实例
2018/04/12 Python
Python+Tensorflow+CNN实现车牌识别的示例代码
2019/10/11 Python
Python FFT合成波形的实例
2019/12/04 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
Hurley官方网站:扎根于海滩生活方式的全球青年文化品牌
2020/05/18 全球购物
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
个人简历自我评价
2014/02/02 职场文书
七年级政治教学反思
2014/02/03 职场文书
公司廉洁自律承诺书
2014/03/27 职场文书
初中生评语大全
2014/04/24 职场文书
Pytorch 使用tensor特定条件判断索引
2021/04/08 Python
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL
基于Python实现流星雨效果的绘制
2022/03/18 Python