首页 > 技术笔记 > javascript > 使用Zero Clipboard实现的跨浏览器复制功能
2015
01-10

使用Zero Clipboard实现的跨浏览器复制功能

开发中经常会用到复制的功能,在 IE 下实现比较简单。但要想做到跨浏览器比较困难了。本文将介绍一个跨浏览器的库类 Zero Clipboard 。它利用 Flash 进行复制,所以只要浏览器装有 Flash 就可以运行,而且比 IE 的 document.execCommand(“Copy”) 更加灵活。

Zero Clipboard 的实现原理

Zero Clipboard 利用 Flash 进行复制,之前有 Clipboard Copy 解决方案,其利用的是一个隐藏的 Flash。但最新的 Flash Player 10 只允许在 Flash 上进行操作才能启动剪贴板。所以 Zero Clipboard 对此进行了改进,用了一个透明的 Flash ,让其漂浮在按钮之上,这样其实点击的不是按钮而是 Flash ,也就可以使用 Flash 的复制功能了。

Zero Clipboard的下载

1.3.5版本下载地址:https://github.com/zeroclipboard/ZeroClipboard/tree/1.x-master 2.x下载地址:https://github.com/zeroclipboard/ZeroClipboard

如何使用

首先下载 Zero Clipboard ,并解压缩。其中需要两个文件:ZeroClipboard.js 和 ZeroClipboard.swf ,将这两个文件放入到你的项目中。

1.3.5版本使用详解

1.引入js 2.HTML内容 3.定义flash地址 4.实例化 在实例化的时候也可以传入一个元素或者元素数组。 5.复制成功后事件的响应

2.x版本使用详解

1.引入js 2.HTML内容 3.定义flash地址 4.实例化 在实例化的时候也可以传入一个元素或者元素数组。 5.复制成功后事件的响应  
最后编辑:
作者:射雕天龙
转载请注明:转载自射雕天龙的博客(http://blog.wangjunfeng.com)
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!

使用Zero Clipboard实现的跨浏览器复制功能》有 12 条评论

  1. 木杉 说:

    请问一下 手机端 有没有这种 复制到剪切板的 插件?

    • 射雕天龙 说:

      暂时没有,因为浏览器出于安全性的考虑都不允许字节访问剪切板,所以大部分网站包括github这样的网站都是通过flash来实现复制功能.由于html5的流行,手机端对flash不支持或者支持的并不好

留下一个回复

你的email不会被公开。