Js+Flash实现访问剪切板操作
时间:2024-10-10 20:23:05
最近需要遇到了这个问题点击按钮复制链接的功能果断度娘谷哥。最后找到得解决方案ZeroClipBoard一款开源得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动态添加样式效果也不太好。
标签:js,访问,剪切板
0
投稿
猜你喜欢
详解python的异常捕获
2023-05-27 11:24:03
nodejs使用socket5进行代理请求的实现
2024-05-09 14:49:44
详解go语言中sort如何排序
2023-09-03 14:00:38
为您解读CSS优先级
2009-06-18 18:29:00
Python编写nmap扫描工具
2021-08-07 14:53:10
在Django的View中使用asyncio的方法
2022-04-10 13:16:41
Vue中this.$nextTick()的具体使用
2023-07-02 16:59:30
MySQL创建新用户、增加账户的2种方法及使用实例
2024-01-14 12:54:55
用server.transfer隐藏网页真实地址
2007-12-04 13:02:00
使用pyecharts生成Echarts网页的实例
2023-02-22 10:19:42
SQL Server ISNULL 不生效原因及解决
2024-01-13 09:53:34
利用PyQt5模拟实现网页鼠标移动特效
2022-11-17 10:46:01
python学习笔记之调用eval函数出现invalid syntax错误问题
2023-11-03 01:48:30
python交换两个变量的值方法
2022-07-28 10:10:48
python定义函数如何判断年份是否为闰年
2022-01-29 18:56:12
Python基于execjs运行js过程解析
2021-08-10 22:56:47
python检测某个变量是否有定义的方法
2021-05-17 18:45:01
Pytorch 中retain_graph的用法详解
2021-01-20 21:23:45
总结归纳python os库常用方法
2023-05-23 19:34:05
教你轻松掌握如何保护MySQL中的重要数据
2008-12-19 17:42:00