位置: 编程技术 - 正文

Zero Clipboard js+swf实现的复制功能使用方法

编辑:rootadmin
开发中经常会用到复制的功能,在 IE 下实现比较简单。但要想做到跨浏览器比较困难了。本文将介绍一个跨浏览器的库类 Zero Clipboard 。它利用 Flash 进行复制,所以只要浏览器装有 Flash 就可以运行,而且比 IE 的 document.execCommand("Copy") 更加灵活。 Zero Clipboard 的实现原理 Zero Clipboard 利用 Flash 进行复制,之前有 Clipboard Copy 解决方案,其利用的是一个隐藏的 Flash。但最新的 Flash Player 只允许在 Flash 上进行操作才能启动剪贴板。所以 Zero Clipboard 对此进行了改进,用了一个透明的 Flash ,让其漂浮在按钮之上,这样其实点击的不是按钮而是 Flash ,也就可以使用 Flash 的复制功能了。 如何使用 Zero Clipboard 首先下载 Zero Clipboard ,并解压缩。其中需要两个文件:ZeroClipboard.js 和 ZeroClipboard.swf ,将这两个文件放入到你的项目中。 下载地址Zero Clipboard 开源的 JavaScript+flash 复制库类演示地址: 第一步,导入 ZeroClipboard.js 文件: <script type="text/javascript" src="ZeroClipboard.js"></script> 再设置 ZeroClipboard.swf 文件的路径: ZeroClipboard.setMoviePath( "ZeroClipboard.swf" ); 注意:以上 ZeroClipboard.js, ZeroClipboard.swf 两个文件的路径都需要替换为你项目中对应文件的路径。或者也可以是一个绝对路径。 然后就使用了: 这样,这样基本功能实现了,点击按钮就可以复制设置好的文本了。你可能注意到了,待复制的文本是固定的,如果想要动态改变的怎么办,比如复制一个输入框中的内容。不用担心,下面会讲到的。 其他函数 Zero Clipboard 还提供了一些其他的函数,其中有一些非常有用。 reposition() 方法 因为按钮上漂浮有一个 Flash 按钮,所以当页面大小发生变化时,Flash 按钮可能会错位,这样就点不着了。 不要紧,Zero Clipboard 提供了一个 reposition() 方法,可以重新计算 Flash 按钮的位置。我们可以将它绑定到 resize 事件上。 bind 是一个跨浏览器的事件绑定函数。=========================================================这个想必大家都已知道。IE 的事件绑定函数是 attachEvent;而 Firefox, Safari 是 addEventListener;Opera 则两种都支持。下面进行封装。 例如添加一个页面点击事件: =========================================================hide() 和 show() 方法 这两个方法可以隐藏和显示 Flash 按钮 。其中 show() 方法会调用 reposition() 方法。 setCSSEffects() 方法 当鼠标移到按钮上或点击时,由于有 Flash 按钮的遮挡,所以像 css ":hover", ":active" 等伪类可能会失效。setCSSEffects() 方法就是解决这个问题。首先我们需要将伪类改成类,比如: 我们可以调用 clip.setCSSEffects( true ); 这样 Zero Clipboard 会自动为我们处理:将类 .hover 当成伪类 :hover 。 getHTML() 方法 如果你想自己实例一个 Flash ,不用 Zero Clipboard 的附着方法,那么这个方法就可以帮上忙了。它接受两个参数,分别为 Flash 的宽度和高度。返回的是 Flash 对应的 HTML 代码。例如: var html = clip.getHTML( , ); 你可以用 innerHTML 或直接 document.write(); 进行输出。 以下是我测试下输出的 HTML 代码: <embed id="ZeroClipboardMovie_1" src="zeroclipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="" height="" name="ZeroClipboardMovie_1" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage=" flashvars="id=1&width=&height=" wmode="transparent" /> IE 的 Flash JavaScript 通信接口上有一个 bug 。你必须插入一个 object 标签到一个已存在的 DOM 元素中。并且在写入 innerHTML 之前请确保该元素已经 appendChild 方法插入到 DOM 中。 Zero Clipboard 事件处理 Zero Clipboard 提供了一些事件,你可以自定义函数处理这些事件。Zero Clipboard 事件处理函数为 addEventListener(); 例如当 Flash 完全载入后会触发一个事件 "load" 。 clip.addEventListener( "load", function(client) { alert("Flash 加载完毕!"); }); Zero Clipboard 会将 clip 对象作为参数传入。即上例中的 "client" 。 还有 "load" 也可以写成 "onLoad",其他的事件也可以这样。 其他事件还包括: mouseOver 鼠标移上事件 mouseOut 鼠标移出事件 mouseDown 鼠标按下事件 mouseUp 鼠标松开事件 complete 复制成功事件 其中 mouseOver 事件和 complete 事件比较常用。 前面说过,如果需要动态改变待复制的内容,那 mouseOver 事件就可以派上用场了。例如需要动态复制一个 id 为 test 的输入框中的值,我们可以在鼠标 over 的时候重新设置值。 clip.addEventListener( "mouseOver", function(client) { var test = document.getElementById("test"); client.setText( test.value ); // 重新设置要复制的值 }); 复制成功: clip.addEventListener( "complete", function(){ alert("复制成功!"); }); 好了,就介绍到这里吧。赶快自己试验下吧。

推荐整理分享Zero Clipboard js+swf实现的复制功能使用方法,希望有所帮助,仅作参考,欢迎阅读内容。

Zero Clipboard js+swf实现的复制功能使用方法

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

Javascript常考语句条收集 1.document.write("");输出语句2.JS中的注释为//3.传统的HTML文档顺序是:document-html-(head,body)4.一个浏览器窗口中的DOM顺序是:window-(navigator,screen,history,location,docume

Javascript Math ceil()、floor()、round()三个函数的区别 ceil():将小数部分一律向整数部分进位。如:Math.ceil(.2)//返回Math.ceil(.7)//返回Math.ceil(.0)//返回floor():一律舍去,仅保留整数。如:Math.floor(.2)

Javascript 入门基础学习 一.JavaScript简介:学习JavaScript之前,有些东西你需要先了解:HTMLXHTML我觉得这些不需要太深入,懂个大概就行。JavaScript是:JavaScript被设计用来向HTML页

标签: Zero Clipboard js+swf实现的复制功能使用方法

本文链接地址:https://www.jiuchutong.com/biancheng/381869.html 转载请保留说明!

上一篇:JavaScript replace(rgExp,fn)正则替换的用法

下一篇:Javascript常考语句107条收集(javascript语法总结)

  • 增值税普通发票几个点
  • 合伙企业如何纳入合并报表
  • 外地预缴税金
  • 销售财务软件的公司怎么做账
  • 一般纳税人是什么型企业
  • 企业所得税怎么算出来
  • 去年工资计提错误,今年如何修改
  • 别人公司过账用自己的银行卡会查吗
  • 税务局代开发需要盖章吗
  • 小规模公司初期注销流程
  • 租办公室还要交什么税
  • 航天金税盘证书口令错误
  • 工程成本控制方法
  • 生产过程中报废怎么核算成本
  • 货物运输代理服务税率
  • 非居民企业间接转让股权案例
  • 企业怎么办税
  • 企业发工资交税
  • 通讯费发票抬头为个人能否报销
  • 待解报预算收入扣款怎么做账
  • 为什么应收和预收在一起
  • 原材料的借方发生额怎么算
  • 未做账务处理
  • 测网速中国联通
  • win10内存完整性不兼容的驱动程序
  • win11windows键没反应
  • 在建工程工程款优先受偿权
  • 物业公司的水电工工作职责
  • 一次性补偿金在取得后间隔一个月申报可以吗
  • 现金发放的餐补算工资么
  • 苹果手机屏幕旋转怎么设置关闭
  • 公司没有营业额零报税的后果
  • 高手成长礼包
  • php查看变量数据类型
  • php的判断语句
  • 营改增后土地增值税如何计算
  • 应交税金及附加包括哪些
  • 第十七届全国大学生智能车
  • 小规模纳税人申报表模板
  • 企业初期面临的主要问题
  • mysql 连接语句
  • 支付劳务费会计科目怎么写
  • 同一控制下收购溢价
  • 水电费进项税额转出情形
  • 无形资产账面价值和账面余额的区别
  • 招待客户住宿属于什么费用
  • 微信转账没有显示对方的名字怎么办
  • 员工体检费发票怎么入账
  • 生产型企业怎么做账
  • 车船税没发票只交可以吗
  • 固定资产损失计入什么科目
  • 物业管理企业应当与居委会共同做好什么工作
  • 用户登陆login什么意思
  • 系统32位和64位的区别 Windows系统32位和64位的区别在哪里
  • Win10 64位系统下鼠标右键刷新没反应的解决方案
  • Windows 10 PC/Mobile Build 14965预览版推送:改进PC端
  • 资源管理器操作教程
  • linux批量操作
  • ubuntu debian
  • macos睡眠
  • parallel capacitor
  • 让xp系统自动修复软件
  • linux命令速记
  • win8如何隐藏任务栏
  • javascript基于什么的语言
  • linux安装unixodbc
  • js取二维数组数组的值
  • Node.js中的事件循环是什么意思
  • 如何使用nodejs
  • shc加密后不能运行
  • shell脚本语句
  • eclipse显示错误提示
  • 浙江省网上税务服务大厅
  • 现在德国的普通话怎么样
  • 增值税发票打印机怎么连接电脑
  • 开票信息电子版怎么做
  • 已办理了退休,档案还需要保存吗
  • 怎么查询购置税交了没有
  • 小规模纳税人个税税率
  • 杭州汽车摇号中签率多少
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设