02月
25日

前端细节：跨浏览器点击界面按钮复制内容到剪贴板

类归于： 做东西 Hbomb 写于 15:53

在YOHO!Adsence时，需要一个功能，就是复制内容到剪贴板，通常我们使用的复制到剪贴板的方法就是，采用：

1

 window.clipboardData.setData("Text", txt);

很不幸的是这个复制到剪贴板的方法，只是用于IE，而且如果是IE6新版本，或者IE7会弹出是否允许访问剪贴板的提示，这样一来用户体验就很不好了。特别对于那些非IE用户。于是，我在网上找了下，发现了以下跨浏览器实现的方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

copyToClipboard = function(txt)
{
  if(window.clipboardData)
  {
     window.clipboardData.clearData();
     window.clipboardData.setData(”Text”, txt);
  }
  else if(navigator.userAgent.indexOf(”Opera”) != -1)
  {
    window.location = txt;
  }
  else if (window.netscape)
  {
    try
    {
      netscape.security.PrivilegeManager.enablePrivilege(”UniversalXPConnect”);
    }
    catch (e)
    {
      alert(”您的firefox安全限制限制您进行剪贴板操作，请打开’about:config’将signed.applets.codebase_principal_support’设置为true’之后重试”);
      return false;
    }
    var clip = Components.classes[’@mozilla.org/widget/clipboard;1′].createInstance(Components.interfaces.nsIClipboard);
    if (!clip)
      return;
    var trans = Components.classes[’@mozilla.org/widget/transferable;1′].createInstance(Components.interfaces.nsITransferable);
    if (!trans)
      return;
    trans.addDataFlavor(’text/unicode’);
    var str = new Object();
    var len = new Object();
    var str = Components.classes[”@mozilla.org/supports-string;1″].createInstance(Components.interfaces.nsISupportsString);
    var copytext = txt;
    str.data = copytext;
    trans.setTransferData(”text/unicode”,str,copytext.length*2);
    var clipid = Components.interfaces.nsIClipboard;
    if (!clip)
      return false;
    clip.setData(trans,null,clipid.kGlobalClipboard);
  }
}

但是这个办法，并不完美，在chrome和Safari下没法实现复制，而且在firefox下，修改fierfox配置才能支持该功能。所以采用纯JavaScript是无法完成该项任务，浏览器对于复制到剪切板出于安全考虑，都比较谨慎的给实现该功能设置了障碍。于是我继续寻找解决方案，之后看到了一个JavaScript借助flash的剪切板的版本，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

function copy(inElement) 
{
  if (inElement.createTextRange) 
  {
    var range = inElement.createTextRange();
    if (range && BodyLoaded==1)
      range.execCommand('Copy');
  }
 else
 {
    var flashcopier = 'flashcopier';
    if(!document.getElementById(flashcopier)) 
    {
      var divholder = document.createElement('div');
      divholder.id = flashcopier;
      document.body.appendChild(divholder);
    }
    document.getElementById(flashcopier).innerHTML = '';
    var divinfo = '<embed src="_clipboard.swf" FlashVars="clipboard='+encodeURIComponent(inElement.value)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
    document.getElementById(flashcopier).innerHTML = divinfo;
  }
}

as3的官方参考：

setClipboard () 方法

public static function setClipboard(string:String):void

语言版本 : ActionScript 3.0
Player 版本 : Flash Player 9

用指定的文本字符串替换剪贴板的内容。

注意：出于安全方面的考虑，您无法读取系统剪贴板的内容。 换句话说，不存在相应的 System.getClipboard() 方法。

参数

string:String — 要放置在系统剪贴板上的纯文本字符串，用于替换系统剪贴板上的当前内容（如果有）。

方法来源：http://www.jeffothy.com/weblog/clipboard-copy/

但是这个方法在fp9是可以适用的，但是在fp10之后，这个方法的由于fp10的安全机制的问题，导致不允许脚本去调用fp的as内部方法，于是这个方法在浏览器升级fp后，又是不可以通用了。这样就有了以下方法，人的聪明才知是无限的，既然fp10不允许外部脚本调as的内部方法，为何不反其道行之，采用内部方法调外部的内容能，于是就有了，之下的方法，原理是，在点击触发的dom结构上，蒙一层，这层是透明的flash，当用户点击这个dom结构时，其实同时也点击了这个flash，这样同样还是调setClipboard，而是内部事件触发的，这个方法zeroclipboard,这样就真真实现了跨浏览器的复制到剪贴板的功能。
测试页面如下：点击这里
现在YOHO!Adsense就是采用了这个方法。