`
weijavamen
  • 浏览: 8517 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

ZeroClipboard 学习笔记

阅读更多

ZeroClipboard是在桌面电脑的浏览器上,通过flash技术实现“复制到剪切板”功能的一个程序。它的好处是可以兼容所有浏览器,完成剪切板的操作。

我们在使用的时候主要就用到两个文件:一个是js文件ZeroClipboard.js,用来引用在网页中;另一个则是swf文件ZeroClipboard.swf,它无需我们在代码里引用,而是被之前的那个ZeroClipboard.js二次调用的。

ZeroClipboard的工作原理大概是,在网页的“复制”按钮上层遮罩一个透明的flash,这个flash在被点击之后,会调用其的剪切板处理功能,完成对特定文本的复制。这里有几件事需要我们来完成:

创建一个透明的flash
将这个flash浮在按钮上层
确定要复制的文本是什么
监听这个透明flash的鼠标点击事件
该flash被点击之后,完成剪切板处理
对于这几件事,ZeroClipboard分别提供了不同的api,来完成整个需求。

创建flash

创建的过程其实就是一个var clip = new ZeroClipboard.Client()的过程,这时ZeroClipboard.swf会被载入。值得注意的时,这里的swf文件默认需要放在和网页相同的目录下,且文件名固定。如果我们需要移动这个swf文件的位置或改名,则需要在创建swf文件之前运行:

ZeroClipboard.setMoviePath( 'http://YOURSERVER/path/ZeroClipboard.swf' );

ZeroClipboard.setMoviePath( './src/ZeroClipboard.swf' );
里面的参数可以是相对地址也可以是绝对地址。

将透明flash浮在按钮上层

这里有一个很有趣的英文单词:glue。我们可以通过下面这个api,将flash和按钮重叠,且浮在按钮之上:

clip.glue( 'clip-button-id' );

clip.glue( document.getElementById('clip-button-id' ));
即第一个参数为id或dom对象都可以。如果按钮在网页运行中位置发生了变化,flash是不会自动调整位置的,为此我们提供了另一个api可以手动更新flash的位置:

clip.reposition();
flash的相对浮动

这里还提供了一种更巧妙的方式:如果按钮的上层有任何position:relative的块状元素,比如div,而按钮和这个块状元素的位置又是相对固定的,那么可以在调用glue函数时,将这个div的id作为第二个参数传进去,不过同时reposition这个api就失效了。比如:

clip.glue( 'clip-button-id', 'clip-container-id' );
设置要复制的文本

这一步很简单:

clip.setText('要复制的文本在这里');
监听事件

通过addEventListener进行事件绑定,可以绑定的事件有以下几个:

onload:flash文件加载成功
onmousedown:鼠标在flash上按下
onmouseup:鼠标在flash上释放
onmouseover:鼠标经过flash
onmouseout:鼠标移开flash
oncomplete:剪切板操作完成 (用鼠标点击该flash浮层的时候会触发事件复制到剪切板)
剪切板操作完成之后可以通过api销毁flash

clip.destroy();

有的同仁们,会遇到我第一次遇到的问题,就是写成静态的,是不能实现,但是也没有报错,后面,经过多次测验,把纯静态文件部署到相应的容器里,再次运行,没任何问题。。。。


内容借鉴于:http://jiongks.name/blog/zeroclipboard-intro/

 

分享到:
评论

相关推荐

    ZeroClipboard

    ZeroClipboard是一款著名的JavaScript库,主要用于实现网页上的“复制到剪贴板”功能。这个功能在很多网站上都有应用,比如复制验证码、复制分享链接等。它巧妙地利用了浏览器的安全限制,通过Flash技术来实现跨域...

    ZeroClipboard.js ZeroClipBoard.swf

    ZeroClipboard.js ZeroClipBoard.swf下载

    使用 ZeroClipboard 实现复制功能

    标题中的“使用 ZeroClipboard 实现复制功能”是指利用 ZeroClipboard 这个JavaScript库来实现在网页上一键复制文本的功能。这个库广泛应用于Web应用中,为用户提供了一个方便的交互方式,模仿了桌面软件中常见的...

    zeroclipboard-2.2.0.zip

    zeroclipboard是一款知名的JavaScript库,专为前端开发者设计,用于实现网页中元素的复制到剪贴板功能。这个库的最新版本是2.2.0,被包含在一个名为"zeroclipboard-2.2.0.zip"的压缩包内。在前端开发中,特别是在...

    ZeroClipboard实现js复制

    ZeroClipboard是一款JavaScript库,它允许网页开发者通过模拟浏览器的右键复制功能,实现在网页上复制文本到剪贴板的功能。这款库巧妙地利用了Flash技术来绕过浏览器的安全限制,因为JavaScript直接操作剪贴板在大...

    zeroclipboard组件

    zeroclipboard组件是JavaScript库中的一个重要工具,它主要用于实现网页上的内容复制功能,尤其在面临浏览器兼容性问题时显得尤为关键。这个组件利用了Adobe Flash技术,因为Flash在过去的浏览器环境中具有较广泛的...

    ZeroClipboard demo 网页复制功能

    **ZeroClipboard** 是一个流行的JavaScript库,主要用于在网页上实现跨浏览器的复制功能。这个库巧妙地利用了浏览器的安全限制,让网页应用可以模拟系统剪贴板的操作,从而让用户能够轻松地复制文本到剪贴板。它通过...

    ZeroClipboard 复制与粘贴

    ZeroClipboard 是一个JavaScript库,主要用于实现网页上的跨浏览器复制功能,尤其在处理用户希望复制文本到剪贴板的场景中非常实用。这个库巧妙地利用了Adobe Flash技术,因为Flash在浏览器中的广泛支持,可以绕过...

    zeroclipboard-2.2.0

    zeroclipboard是一个JavaScript库,主要用于帮助Web应用实现复制到剪贴板的功能。在标题"zeroclipboard-2.2.0"中,我们看到的是这个库的一个特定版本,即2.2.0。这通常意味着它包含了该库在此版本中的所有功能、修复...

    ZeroClipboard实现兼容多浏览器复制

    标题中的“ZeroClipboard实现兼容多浏览器复制”是指一个JavaScript库,ZeroClipboard,它允许用户在网页上通过模拟鼠标右键点击复制文本到剪贴板,从而实现跨浏览器的复制功能。这个库尤其重要,因为浏览器的安全...

    ZeroClipboard 元素内容复制-兼容各浏览器

    ZeroClipboard 是一个JavaScript库,它允许网页应用模拟操作系统级别的剪贴板功能,即实现元素内容的复制。这个库尤其有用,因为它能跨浏览器工作,确保无论用户使用的是Chrome、Firefox、Safari还是其他浏览器,都...

    ZeroClipboard使用问题记录

    ZeroClipboard是一款开源JavaScript库,它允许用户通过浏览器的Flash插件实现复制文本到剪贴板的功能。这个工具常被用于网站上,为用户提供一个“复制到剪贴板”的按钮,无需用户手动操作即可方便地复制内容。在使用...

    ZeroClipboard js实现完美复制

    ZeroClipboard是一款JavaScript库,它允许用户通过“剪贴板”API在网页上实现文本的复制功能,从而提供一种跨浏览器的复制体验。这个库利用了Adobe Flash技术来绕过浏览器的安全限制,因为JavaScript通常不能直接...

    ZeroClipboard.zip

    ZeroClipboard是一款开源JavaScript库,主要用于实现网页上的“复制到剪贴板”功能。这个库巧妙地利用了Flash技术,因为在HTML5之前,浏览器的安全限制不允许JavaScript直接操作剪贴板。尽管现代浏览器已经开始支持...

    zeroClipboard.js + swf 支持chrome

    《zeroClipboard.js与SWF:实现跨浏览器的拷贝功能》 在当今互联网技术日新月异的时代,浏览器兼容性问题一直是开发者面临的一大挑战。针对这个问题,"zeroClipboard.js + swf 支持chrome" 提供了一种有效的解决...

    zclip.js ZeroClipboard.swf 下载

    《zclip.js与ZeroClipboard.swf:实现网页文本复制功能》 在网页开发中,有时候我们需要为用户提供方便快捷地复制文本的功能,而zclip.js和ZeroClipboard.swf就是实现这一功能的强大工具。这两个组件结合使用,可以...

    ZeroClipboard.swf

    ZeroClipboard.swf

    跨浏览器复制文本(clipboard和ZeroClipboard使用说明以及js文件)

    本篇文章将深入探讨两种实现这一功能的JavaScript库——`ZeroClipboard`和`clipboard`,并详细介绍它们的工作原理、使用方法以及在不同场景下的适用性。 ## 一、ZeroClipboard `ZeroClipboard` 是一个早期广泛使用...

    php下利用ZeroClipboard复制【兼容谷歌】

    ZeroClipboard是一个流行的JavaScript库,它允许我们创建“复制到剪贴板”按钮,模拟用户点击右键选择“复制”的行为。在这个场景中,我们将深入探讨如何在PHP环境中利用ZeroClipboard库,特别是如何解决其在谷歌...

Global site tag (gtag.js) - Google Analytics