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 相关文章推荐
在你的网页中嵌入外部网页的方法
Apr 02 Javascript
JS匀速运动演示示例代码
Nov 26 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
详解AngularJS中的http拦截
Feb 09 Javascript
用JS生成UUID的方法实例
Mar 30 Javascript
jQuery的ready方法实现原理分析
Oct 26 Javascript
原生js实现秒表计时器功能
Feb 16 Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 Javascript
Vue使用mixins实现压缩图片代码
Mar 14 Javascript
npm 更改默认全局路径以及国内镜像的方法
May 16 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
利用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下MYSQL limit的优化
2008/01/10 PHP
php使用iconv中文截断问题的解决方法
2015/02/11 PHP
在Laravel中实现使用AJAX动态刷新部分页面
2019/10/15 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
JavaScript Eval 函数使用
2010/03/23 Javascript
JavaScript中判断函数是new还是()调用的区别说明
2011/04/07 Javascript
js 动态加载事件的几种方法总结
2013/12/25 Javascript
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
WebPack基础知识详解
2017/01/16 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
2017/09/19 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
利用Console来Debug的10个高级技巧汇总
2018/03/26 Javascript
Vue-router 切换组件页面时进入进出动画方法
2018/09/01 Javascript
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
vue 实现一个简单的全局调用弹窗案例
2020/09/10 Javascript
Python实现的批量下载RFC文档
2015/03/10 Python
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
Python基于pillow判断图片完整性的方法
2016/09/18 Python
使用selenium模拟登录解决滑块验证问题的实现
2019/05/10 Python
Django rest framework jwt的使用方法详解
2019/08/08 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
农业大学毕业生的个人自我评价
2013/10/11 职场文书
表彰先进集体通报
2014/01/12 职场文书
说明书格式及范文
2014/05/07 职场文书
体育教师求职信
2014/05/24 职场文书
建筑工程材料员岗位职责
2015/04/11 职场文书
sql注入教程之类型以及提交注入
2021/08/02 MySQL