Clipboard.js : 移动端浏览器实现网页内容复制

浅浅的花香味﹌ 2022-07-13 20:13 150阅读 0赞

最近在项目中遇到这样一个需求：

点击按钮，将指定的URL复制到剪贴板，然后用户可以粘贴到浏览器(Safari为主)自行打开。

### 方案一：zeroClipboard.js ###

**github地址**：https://github.com/zeroclipboard/zeroclipboard

**复制原理**：zeroClipboard利用透明的 flash 覆盖在复制按钮上，点击 flash，将复制内容传入到 flash 中，再通过 flash 把传入的内容写到剪贴板上

首先想到这个插件的原因是，之前在PC端的项目中使用过，兼容性很好，驾轻就熟，所以，先用它做了个demo

**HTML**

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;</code> 
      <code>input</code> 
      <code>type="text" name="" id="iUrl" value="https://github.com/zeroclipboard/zeroclipboard"&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>button</code> 
      <code>id="copyUrlBtn"&gt;复制链接&lt;/</code> 
      <code>button</code> 
      <code>&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**JAVASCRIPT**

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>(</code> 
      <code>function</code> 
      <code>(){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>btn = document.getElementById(</code> 
      <code>'copyUrlBtn'</code> 
      <code>),</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>text = document.getElementById(</code> 
      <code>'iUrl'</code> 
      <code>),</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>zc = </code> 
      <code>new</code> 
      <code> ZeroClipboard(btn);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>zc.on(</code> 
      <code>'beforecopy'</code> 
      <code>, </code> 
      <code>function</code> 
      <code>(e){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>zc.setText(text.value);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>});</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>btn.onclick = </code> 
      <code>function</code> 
      <code>(){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>alert(</code> 
      <code>'已复制'</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>})();</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**使用zeroClipboard.js需要注意以下两点：**

1\# ZeroClipboard.swf 和 ZeroClipboard.min.js 需在同一目录结构下， ZeroClipboard.swf无需调用，只需在页面中引用ZeroClipboard.min.js 即可;

2\# 测试复制功能需在服务器环境，可以是简单的本地服务器，如：http://localhost:8000/xx

**测试结果：**

在PC端浏览器上测试，功能正常；但是在ios上,无论是QQ浏览器，还是Safari浏览器都无法实现复制功能。

可能由于Flash技术正被各大浏览器厂商冷落，所以，截止到目前ZeroClipboard.js最新版，也无法实现在移动端浏览器进行文本复制。

### 方案二：Clipboard.js ###

** 官网地址**：https://clipboardjs.com/

** 兼容性：**

![517121-20161209145055538-1272601514.png][]

虽然要求Safari版本在10以上，但是作者做了很好的优雅降级：

> The good news is that clipboard.js gracefully degrades if you need to support older browsers. All you have to do is show a tooltip saying Copied! when success event is called and Press Ctrl+C to copy when error event is called because the text is already selected.

也就是说，Safari版本是10以上的，可以直接成功复制；如果是版本小于10，可以通过如下代码提示用户手动复制：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>clipboard.on(</code> 
      <code>'error'</code> 
      <code>, </code> 
      <code>function</code> 
      <code>(e) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>alert(</code> 
      <code>'请选择“拷贝”进行复制!'</code> 
      <code>)</code> 
     </div> 
     <div> 
      <code>});</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**Safari版本在10以下的效果：**

在 alert('请选择“拷贝”进行复制!') 之后，待复制的文字会自动选中，然后弹出系统本身的tooltip   
  
效果如下：

![517121-20161209145511616-1147311775.png][]

DEMO：

`//init`

`var` `clipboard =` `new` `Clipboard(` `'.btn'` `);`

`//优雅降级:safari 版本号>=10,提示复制成功;否则提示需在文字选中后，手动选择“拷贝”进行复制`

`clipboard.on(` `'success'` `,` `function` `(e) {`

`    ` `alert(` `'复制成功!'` `)`

`    ` `e.clearSelection();`

`});`

`clipboard.on(` `'error'` `,` `function` `(e) {`

`    ` `alert(` `'请选择“拷贝”进行复制!'` `)`

`});`

转载请注明出处：[http://www.cnblogs.com/hehe520/][http_www.cnblogs.com_hehe520]

[517121-20161209145055538-1272601514.png]: /images/20220714/a44f64ea24c84473be85d7cc9f3035f3.png
[517121-20161209145511616-1147311775.png]: /images/20220714/450974225daf45f9827c0b760591a3cb.png
[http_www.cnblogs.com_hehe520]: http://www.cnblogs.com/hehe520/