網址:https://clipboardjs.com/
最近在做一個的智能客服Web端瀏覽器應用,其中有一項需求是客戶在獲取系統返回的
答案后點擊“復制答案”按鈕將答案復制到系統剪切板。本以為這是一個小case,但是發現如果
要對各種主流瀏覽器都有良好的兼容性並不簡單。原因在於出於安全原因,大多數現代瀏覽
器都未提供通用的剪貼板復制接口(或即便有,也默認被禁用)。
上網搜索了一下,現有的方案大致有兩種:
一:使用原生javascript中window.clipboardData實現復制到剪貼板功能;
二:使用Zero Clipboard庫;
在嘗試了之后發現現有的方案都不能滿足需求。
方案一僅僅支持ie瀏覽器,在firefox,chrome瀏覽器上則不起作用。
方案二則是現有絕大多數網站(包括github等)所采取的方案,ZeroClipboard是國外大神開發的一個
用於剪貼板復制的 JS 插件,它是基於 Flash 來實現跨瀏覽器的復制功能的。當我們使用 ZeroClipboard
的時候,它會悄悄隱藏一個小小的 Flash 影片(swf),不會對我們的用戶界面造成影響。我們只需要借助
它實現復制功能就行了。
ZeroClipboard 中的 "Zero" 指的就是"不可見,零干擾"。
對此感興趣的可以參考 http://my.oschina.net/shniu/blog/298406?p=1
但是在現代瀏覽器中,flash逐漸沒落,firefox瀏覽器默認不開啟flash,所以Zero Clipboard在
兼容方面也表現不佳。
那么,對於復制到剪切板這種簡單的操作有沒有一種實現簡單,兼容性良好的解決方案呢?有的!那就是github
上的開源項目clipboard.js(官網:http://zenorocha.github.io/clipboard.js/) 官網對於clipboard.js的介紹
非常簡單:
A modern approach to copy text to clipboard No Flash. No dependencies. Just 3kb gzipped
Copying text to the clipboard shouldn't be hard. It shouldn't require dozens of steps to configure
or hundreds of KBs to load. But most of all, it shouldn't depend on Flash or any bloated framework.
That's why clipboard.js exists.(拷貝文本到剪切板不應該復雜,它不應該需要許多步驟以及幾百KB的文件,另
外,它不應該依靠flash以及其他框架,這就是clipboard存在的原因)
使用clipboard簡單快捷,並且從官網下載下來的zip格式壓縮包里有非常實用的demo,舉一個簡單的例子:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>target-div</title> 6 </head> 7 <body> 8 <!-- 1. Define some markup --> 9 <div>hello</div> 10 <button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button> 11 12 <!-- 2. Include library --> 13 <script src="../dist/clipboard.min.js"></script> 14 15 <!-- 3. Instantiate clipboard --> 16 <script> 17 var clipboard = new Clipboard('.btn'); 18 19 clipboard.on('success', function(e) { 20 console.log(e); 21 }); 22 23 clipboard.on('error', function(e) { 24 console.log(e); 25 }); 26 </script> 27 </body> 28 </html>
非常簡單吧,我們只需下面四步:
1.引入clipboard.min.js文件
2.選擇一個可以確定被拷貝元素的選擇器,本例中使用用的是基本的標簽選擇器<div>,當然也可以使用id選擇器 class選擇器等等
3.定義一個button按鈕,注意按鈕的屬性:
data-clipboard-action="copy" data-clipboard-target="div"
其中data-clipboard-target屬性就是第二步你定義的選擇器
4.書寫js,建立clipboard對象以及復制后執行的方法
OK,這樣功能就完成了,點擊按鈕后就會發現div的內容已經拷貝到剪切板了。