微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

Js+Flash实现访问剪切板操作_javascript技巧

php中文网
发布： 2016-05-16 17:48:07
原创
1408人浏览过

最近需要遇到了这个问题点击按钮复制链接的功能果断度娘谷哥。最后找到得解决方案ZeroClipBoard一款开源得js+Flash实现得剪切板操作
但是搜寻了众多例子之后发现大多都是介绍一个页面只有一个固定的复制操作

而我得需求是这样
一个动态Repeater动态加载出各个地址和复制按钮。
这个解决方案得原理是：
拿js动态加载一个透明flash.然后遮盖到你要点击得按钮上面,之后在给这个flash得承载元素上绑定事件动态把要复制得值传递到flash中,用flash访问剪切板.
这时候就出现这么一个问题多个按钮如果每个按钮都加栽一遍flash得话会很吃内存并且动态得代码也不是很好写
最后得解决方案如下:

Writecream
Writecream

AI作家和文案内容生成器

Writecream 63
查看详情 Writecream
复制代码 代码如下:



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')">点击复制

复制代码 代码如下:

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

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：简单的实现点击箭头图片切换的js代码_图象特效 下一篇：Js如何判断客户端是PC还是手持设备简单分析_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
JavaScript拖拽系统_触摸事件处理优化 要实现跨平台拖拽需统一鼠标触摸事件，通过事件适配器映射输入，获取触点坐标时使用touches[0]，在位移超阈值后阻止默认行为以避免滚动冲突，结合touch-action:none消除点击延迟，使用requestAnimationFrame节流并利用transform实现流畅动画，同时监听touchend和touchcancel处理中断，确保多点触控下正确退出拖拽状态。
2025-11-30 20:40:02
862
社交媒体登录_javascript第三方授权 第三方授权登录基于OAuth2.0协议，允许用户通过社交平台账号登录网站。JavaScript负责前端交互，如绑定登录按钮、调起授权页面及处理回调。以微信为例，前端触发跳转至授权页，用户确认后重定向至回调地址并携带code参数，前端将code传给后端，由后端换取access_token和openid。Google和Facebook提供JavaScriptSDK（如FB.login和GoogleIdentityServices），可直接弹出授权窗口并返回Token。安全方面需注意：敏感操作交由后端
2025-11-30 20:37:02
898
高性能JavaScript_内存泄漏排查指南 内存泄漏主因包括全局变量、闭包、事件监听未解绑等，通过ChromeDevTools分析堆快照与内存趋势，结合代码规范与资源清理可有效排查和预防。
2025-11-30 20:36:30
299
执行上下文详解_javascript作用域链 执行上下文是JavaScript代码运行时的环境，分为全局、函数和eval三种类型，每调用一个函数就会创建一个新的执行上下文并压入执行栈。其生命周期包含创建和执行两个阶段：创建阶段确定this、生成词法环境与变量环境；执行阶段进行变量赋值和代码执行。作用域链由词法环境构成，用于按定义位置从内向外查找变量，确保函数能访问外层作用域的变量，形成闭包机制。闭包使内部函数可持久访问外部函数的变量，即使外部函数已执行完毕，如counter示例中count被持续引用而未被销毁。理解执行上下文与作用域链有助于
2025-11-30 20:34:55
675
版本控制集成_javascript代码管理 使用Git管理JavaScript项目，通过初始化仓库、分支策略和.gitignore排除无关文件，结合ESLint与Prettier实现提交前检查，并利用GitHub协作与CI/CD自动化测试构建，提升开发效率与代码质量。
2025-11-30 20:34:02
131
前端监控系统_javascript错误追踪 前端监控需捕获全局错误、Promise拒绝及跨域脚本问题。1.使用window.onerror捕获运行时错误并上报；2.监听unhandledrejection事件处理未捕获的Promise异常；3.通过crossorigin属性和CORS配置获取跨域脚本完整错误信息；4.采用sendBeacon异步上报，结合去重、限频策略优化性能，确保错误及时、结构化地记录以快速排查问题。
2025-11-30 20:34:01
242
模块打包_Rollup插件开发 开发Rollup插件需理解其钩子机制，核心是name属性和resolveId、load、transform等钩子函数；1.resolveId解析模块路径，2.load返回源码，3.transform转换代码；示例插件将.demo文件转为导出固定字符串；通过buildStart、generateBundle等钩子可控制构建流程；调试可用console.log结合rollup-watch，发布时命名遵循rollup-plugin-xxx规范并支持ESM。
2025-11-30 20:33:24
323
微前端架构JavaScript_模块联邦应用 模块联邦通过Webpack5实现运行时代码共享，解决微前端中依赖重复、复用困难等问题。主应用配置remotes引入远程模块，远程应用通过exposes暴露组件，结合shared确保依赖唯一性。支持跨应用组件动态加载，提升开发效率与系统可维护性，适用于多团队协作的大型系统集成。
2025-11-30 20:33:06
599
JavaScript数据库操作_ORM与原生查询性能对比 ORM开发效率高但性能较低，原生SQL性能优但开发成本高。1.ORM适合快速开发、团队水平不均、需类型安全与迁移管理的场景；2.原生查询适用于高频核心接口、复杂报表、大数据量及对延迟敏感的服务。
2025-11-30 20:32:03
832
前端监控_JavaScript错误追踪 前端监控通过JavaScript错误追踪保障应用稳定，需全面收集并上报错误。1.使用window.onerror捕获全局脚本错误，获取错误信息、文件、行列号及堆栈，跨域需配置crossorigin和CORS；2.通过window.onunhandledrejection监听未处理的Promise拒绝，收集拒绝原因并补充上下文；3.利用window.addEventListener(‘error’,handler,true)捕获资源加载失败，区分资源类型并记录URL、耗时等；4.上报采用sendB
2025-11-30 20:30:57
695
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部