如何解决js在FireFox下不能复制文字到剪贴板的问题

时间:2007-05-21 15:03:50      类别:HTML客户端, Web技术|WEB Tech      本文链接:生活点滴Enjoy Life

昨天注册了Bloggerwave,在后台操作的时候,发现他的js脚本复制到剪贴板居然在FireFox下有效,这可是我第一次发现复制到剪贴板这样的代码在FF下有效,当然IE就不用说了,js在IE下操作剪贴板还是很容易的。后来我就查看了他的源代码,发现人家采用了一个巧妙的方法,那就是利用flash作为跳板来完成此功能,具体代码如下:

  1. <script type="text/javascript">
  2.         function CopyText(id)
  3.         {
  4.                 //copyToClipboard(document.getElementById(id).value);
  5.                 copy(document.getElementById(id).value);
  6.         }
  7.          function copy(text2copy) {
  8.         if (window.clipboardData) {   
  9.           window.clipboardData.setData("Text",text2copy);   
  10.         } else {   
  11.           var flashcopier = 'flashcopier';
  12.              if(!document.getElementById(flashcopier)) {
  13.        var divholder = document.createElement('div');
  14.          divholder.id = flashcopier;
  15.         document.body.appendChild(divholder);
  16.       }
  17.      document.getElementById(flashcopier).innerHTML = '';
  18.        var divinfo = '<embed src="_clipboard.swf" FlashVars="clipboard='+escape(text2copy)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';//这里是关键
  19.    document.getElementById(flashcopier).innerHTML = divinfo;
  20.    alert('Text copied');
  21.    }
  22.    }
  23.         function copyToClipboard(meintext)
  24.     {
  25.      if (window.clipboardData)
  26.        {
  27.        alert("ie");
  28.        // the IE-manier
  29.        window.clipboardData.setData("Text", meintext);
  30.        
  31.        // waarschijnlijk niet de beste manier om Moz/NS te detecteren;
  32.        // het is mij echter onbekend vanaf welke versie dit precies werkt:
  33.        }
  34.        else if (window.netscape)
  35.        {
  36.        
  37.        // dit is belangrijk maar staat nergens duidelijk vermeld:
  38.        // you have to sign the code to enable this, or see notes below
  39.        netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
  40.        
  41.        // maak een interface naar het clipboard
  42.        var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
  43.        if (!clip) return;
  44.        alert("mozilla");
  45.        // maak een transferable
  46.        var trans = Components.classes['@mozilla.org/widget/transferable;1']
  47.                       .createInstance(Components.interfaces.nsITransferable);
  48.        if (!trans) return;
  49.        
  50.        // specificeer wat voor soort data we op willen halen; text in dit geval
  51.        trans.addDataFlavor('text/unicode');
  52.        
  53.        // om de data uit de transferable te halen hebben we 2 nieuwe objecten
  54.        // nodig om het in op te slaan
  55.        var str = new Object();
  56.        var len = new Object();
  57.        
  58.        var str = Components.classes["@mozilla.org/supports-string;1"]
  59.                     .createInstance(Components.interfaces.nsISupportsString);
  60.        
  61.        var copytext=meintext;
  62.        
  63.        str.data=copytext;
  64.        
  65.        trans.setTransferData("text/unicode",str,copytext.length*2);
  66.        
  67.        var clipid=Components.interfaces.nsIClipboard;
  68.        
  69.        if (!clip) return false;
  70.        
  71.        clip.setData(trans,null,clipid.kGlobalClipboard);
  72.        
  73.        }
  74.        alert("Following info was copied to your clipboard:\n\n" + meintext);
  75.        return false;
  76.     }
  77.     </script>

下面是测试代码:
  1. <input type="text" id="mm" name="mm" value="test" /><input type="button" onclick='CopyText("mm")' value="copy" />

请保证该swf文件:_clipboard.swf 和你测试页面在同一个目录下!
下面是bloggerwave的付费评论的内容,看能否再此页面通过
masterseek

该日志未加标签
发表于 2007-05-21 15:03:50 目录:HTML客户端, Web技术|WEB Tech [RSS 2.0] 你可以发表评论, 或者从您的网站 trackback
如果您喜欢本blog,欢迎你的feed订阅,谢谢你的支持

前4排已经被占据了 快抢好位置哦

  • 1楼 Fird 在 2007.09.08 21:09发表评论如下:

    这个我试过了,复制英文时没有问题,但在我这里复制中文会变为十六进制代码:(

  • 2楼 cosβ 在 2007.09.08 21:26发表评论如下:

    [quote]这个我试过了,复制英文时没有问题,但在我…[/quote]确实存在这个问题,应该是flash里面处理的问题,修改js似乎没有用

  • 3楼 海妖的夜 在 2007.10.11 13:17发表评论如下:

    不要写escape函数就行了,这样中文就没问题了.

  • 4楼 Ann 在 2008.03.31 16:41发表评论如下:

    太好了,it’s nice of you !thank you !

  • 转到第
(Required)
(Required, not published)
如果留言未显示请不要重复留言,我将为你恢复!


生活点滴Enjoy Life is proudly powered by WordPress | admin| About Us | cosbeta| Bluehost| site map 0.398s & 25