Js+Flash实现访问剪切板操作
JS 实现 操作 访问 Flash 剪切板
2023-06-13 09:14:41 时间
最近需要遇到了这个问题点击按钮复制链接的功能果断度娘谷哥。最后找到得解决方案ZeroClipBoard一款开源得js+Flash实现得剪切板操作
但是搜寻了众多例子之后发现大多都是介绍一个页面只有一个固定的复制操作
而我得需求是这样
一个动态Repeater动态加载出各个地址和复制按钮。
这个解决方案得原理是:
拿js动态加载一个透明flash.然后遮盖到你要点击得按钮上面,之后在给这个flash得承载元素上绑定事件动态把要复制得值传递到flash中,用flash访问剪切板.
这时候就出现这么一个问题多个按钮如果每个按钮都加栽一遍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实现 find 函数
- JS实现根据密码长度 显示安全条详解编程语言
- 使用JS连接MySQL数据库:实现化繁为简(js连接mysql数据库)
- 快速掌握JS操作MySQL数据库技巧(js操作mysql数据库)
- Oracle中JS的优势让数据库性能提升(oracle中 js)
- 用JS操作FRAME中的IFRAME及其内容的实现代码
- Js获取当前日期时间及其它操作实现代码
- JS面向对象、prototype、call()、apply()
- JS操作日期顺便实现上一周和下一周功能
- js实现的日期操作类DateTime函数代码
- js操作CheckBoxList实现全选/反选(在客服端完成)
- JS打印gridview实现原理及代码
- js控制滚动条缓慢滚动到顶部实现代码
- Js过滤空格的实现代码
- 简易js代码实现计算器操作
- 纯JS实现五子棋游戏兼容各浏览器(附源码)
- Js去掉字符串中的空格(实现代码)
- js中reverse函数的用法详解
- js实现网页标题栏闪烁提示效果实例分析
- js使用正则实现ReplaceAll全部替换的方法
- js实现禁止中文输入的方法