ZeroClipboard 复制到剪贴板

时间：2023-01-20 05:35:12

使用 ZeroClipboard 可以简单的将内容复制到剪贴板，通过 Adobe Flash 和 JavaScript 来实现。“Zero” 意义为这个类库没有界面，界面需要由你来建立。

在线实例

实例预览 ZeroClipboard 复制到剪贴板 简单示例

使用方法

载入 JavaScript 文件

  1. <script src="ZeroClipboard.js"></script>
复制

如果 ZeroClipboard.swf 与页面不在同一个目录下，可以设置路径

  1. // 全局设置 
  2. ZeroClipboard.setDefaults({ 
  3.   moviePath: '/path/ZeroClipboard.swf' 
  4. }); 
  5.  
  6. // 参数中设置 
  7. var clip=new ZeroClipboard(document.getElementById("copy-button"), { 
  8.   moviePath: '/path/ZeroClipboard.swf' 
  9. }); 
复制

调用

可以传递一个元素或者一个元素数组。（这里使用 jQuery 获取元素的方式）

  1. // 直接调用 
  2. var clip=new ZeroClipboard($('#my-button')); 
复制

AMD

如果你使用 RequireJS, curl.js, seajs 等 AMD 规范的模块加载器，那么需要设置模块的 ID 或者路径的值到 amdModuleId，才能正常使用 ZeroClipboard。例：

  1. define(['path/to/zero-clipboard'], function(ZeroClipboard){ 
  2.   ZeroClipboard.setDefaults({ 
  3.     amdModuleId: 'path/to/zero-clipboard' 
  4.   }); 
  5. }); 
复制

或者设置路径，RequireJS 的例子：

  1. requirejs.config({ 
  2.   paths:{ 
  3.     "ZeroClipboard":"path/to/zero-clipboard" 
  4.   } 
  5. }); 
  6.  
  7. define(["ZeroClipboard"],function(ZeroClipboard) { 
  8.   ZeroClipboard.setDefaults({ 
  9.     amdModuleId: 'ZeroClipboard' 
  10.   }); 
  11. }); 
复制

参数说明

  1. new ZeroClipboard(elements [, options])
复制

options 参数说明

名称 默认值 说明
swfPath "ZeroClipboard.swf" Flash 文件路径，默认的 swf 文件路径与 ZeroClipboard.js 相同
trustedDomains window.location.host ? [window.location.host] : [] 可信任的域（字符串或者字符串的数组）
cacheBust true  
forceEnhancedClipboard false  
flashLoadTimeout 30000 加载 Flash 的超时时间，如果不需要，可以设置为 0。单位（ms）
autoActivate true  
bubbleEvents true  
containerId "global-zeroclipboard-html-bridge"  
containerClass "global-zeroclipboard-container"  
swfObjectId "global-zeroclipboard-flash-bridge"  
hoverClass "zeroclipboard-is-hover" 鼠标移上时给元素增加的 Class
activeClass "zeroclipboard-is-active" 选定是给元素增加的 Class
forceHandCursor false  
title null  
zIndex 999999999  

参数 allowScriptAccess 选项的注意事项

1.1.7 及以下的版本，allowScriptAccess 的默认值为 always。意味着允许 "ZeroClipboard.swf" 文件托管的其他的域。为了提高安全性，1.1.7 之后的版本，allowScriptAccess 的默认值为 sameDomain，只允许 "ZeroClipboard.swf" 在相同域之下。

如果你是从 1.1.7 或更低的版本升级到 1.1.7 以上版本时，需要将 "ZeroClipboard.swf" 保存一份到相同域之下，或者设置 allowScriptAccess 的值为 always。

关于 allowScriptAccess 的更多信息，可以参考官方文档。

Data 属性

名称 说明
data-clipboard-target 元素ID。查找该元素后，尝试复制元素的 .value 或 .textContent 或 .innerText 的值
data-clipboard-text 默认复制的内容。

同时设置 data-clipboard-target 和 data-clipboard-text 两个属性时，只有在找不到 clipboard-target 的值时才会选用 clipboard-text

即使获取到 clipboard-target 的值为空，也不会选用 clipboard-text

API 方法

名称 说明
glue(dom) 绑定到元素
reposition() 调整位置
on("Event",my_load_handler) 绑定事件
off("Event",my_load_handler) 取消已绑定的事件

事件

通过 API 的方法 on() 来绑定

名称 示例 说明
load clip.on("load",function(client,args){...}); Flash 加载完成时的事件。args 参数包含以下属性：

flashVersion：当前 Flash 的版本号
mouseover clip.on("mouseover",function(client,args){...}); 鼠标移入时的事件。args 参数包含以下属性：

flashVersion：当前 Flash 的版本号

altKey：是否按住 Alt 键

ctrlKey：是否按住 Ctrl 键

shiftKey：是否按住 Shift 键
mouseout clip.on("mouseout",function(client,args){...}); 鼠标移出时的事件。args 参数包含以下属性：

flashVersion：当前 Flash 的版本号

altKey：是否按住 Alt 键

ctrlKey：是否按住 Ctrl 键

shiftKey：是否按住 Shift 键
mousedown clip.on("mousedown",function(client,args){...}); 鼠标按下时的事件。args 参数包含以下属性：

flashVersion：当前 Flash 的版本号

altKey：是否按住 Alt 键

ctrlKey：是否按住 Ctrl 键

shiftKey：是否按住 Shift 键
mouseup clip.on("mouseup",function(client,args){...}); 鼠标弹起时的事件。args 参数包含以下属性：

flashVersion：当前 Flash 的版本号

altKey：是否按住 Alt 键

ctrlKey：是否按住 Ctrl 键

shiftKey：是否按住 Shift 键
complete clip.on("complete",function(client,args){...}); 成功复制内容时的事件。args 参数包含以下属性：

flashVersion：当前 Flash 的版本号

altKey：是否按住 Alt 键

ctrlKey：是否按住 Ctrl 键

shiftKey：是否按住 Shift 键

text：复制的内容
noflash clip.on("noflash",function(client,args){...}); 没有检测到 Flash 时的事件。
wrongflash clip.on("wrongflash",function(client,args){...}); Flash 版本低于要求版本时的事件。ZeroClipboard 要求 Flash 10.0.0 以上的版本。
dataRequested clip.on("dataRequested",function(client,args){...}); 复制开始时的事件

相关文章