兼容多种浏览器“复制到剪贴板”的解决方案[转载]

原创 2013年12月04日 14:30:14


  昨天在也一个php程序的时候,要实现“复制到剪贴板”的功能,由于安全问题,浏览器的限制越来越严,实现的方法也越来越有限,这个简单的功能要想实现兼容不同的浏览器还真不容易,根据网上的一些资料结合我测试的经验,相关解决方案如下:

  方案一:利用“window.clipboardData”

  代码示例:

  if (window.clipboardData) {

  window.clipboardData.clearData();

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

  };

  评论:这个方案只适合IE浏览器,同时在IE7下有个如下安全提示的对话框。

兼容多种浏览器“复制到剪贴板”的解决方案

  由于IE的浏览器的占有率比较大,这个方案是使用最广的,也是最简单的方法。

  支持浏览器:IE5.5 IE6.0 IE7.0

  方案二:利用“Components.interfaces.nsIClipboard”

  代码示例:

  if (window.netscape) {

  try {

  netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");

  } catch (e) {

  if (flag == 0) {

  alert("You are using the Firefox browser, copy the function browser refuse!

  nPlease in the browser address bar enter'about:config' and Enter n and set'signed.applets.codebase_principal_support' to 'true'"); 

  } else {

  alert("你使用的是Firefox 浏览器,复制功能被浏览器拒绝!n请在浏览器地址栏输入'about:config'

  并回车n然后将'signed.applets.codebase_principal_support'设置为'true'");

  }

  }

  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);

  }

关键字: FCKEditor 闭包 Dojo 在线编辑器 position

兼容多种浏览器“复制到剪贴板”的解决方案。

  评论:这个方案只适合Firefox,同时也有安全的问题,如果想使用这个方法,必须手动开启Firefox的一个配置:signed.applets.codebase_principal_support。方法是:在地址栏输输入“about:config”,设置“signed.applets.codebase_principal_support”为true,默认该项是false。

兼容多种浏览器“复制到剪贴板”的解决方案

  

  这个方法虽然可以在Firefox使用,但让一个普通用户去开启这个配置似乎太专业了。

  把这个方案和方案一结合,可以适用80%以上的用户。

  支持浏览器:Firefox1.5  firefox2.0  firefox3.0

  方案三:javascript + flash

  代码示例:

  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=http://tech.ddvip.com/2009-03/"clipboard.swf" FlashVars="clipboard=' + text2copy + '" 

  width="0" height="0" type="application/x-shockwave-flash"></embed>';

  document.getElementById(flashcopier).innerHTML = divinfo;}

关键字: FCKEditor 闭包 Dojo 在线编辑器 position

兼容多种浏览器“复制到剪贴板”的解决方案。

  评论:这个方案是一个最流行的方法,著名的Clipboard Copy解决方案 利用一个clipboard.swf作为桥梁,复制内容到剪贴板。原理是:创建一个隐藏的flash文件,同时给给flash的变量FlashVars 赋值“clipboard=..”,通过这个赋值flash就会把复制的内容放到剪贴板。这个方法兼容IE、Firefox、Opera、chrome、 Safari,真可谓“万能”的解决方案。浏览器Flash的安装率非常高,这几乎是一个完美的解决方案。

  clipboard.swf 的下载地址:http://watch-life.googlecode.com/files/clipboard.swf。

  但是,世界上有完美的事么?这个方法只支持flash 9 ,不支持最新的flash 10。因为flash10中规定了只有在swf上进行了真实的操作(比如鼠标点击)才能访问剪切板,而上述方法只是使用了一个隐藏的swf文件,通过javascript操作flash的剪贴板,用户并没有对swf文件进行真实的操作,因此这个方法也就失效了。

  那么如何解决这个“真实操作”的问题呢?可以使用一个JavaScript库:Zero Clipboard,利用这个js库可以支持利用flash 10 实现复制到剪贴板。这个方法原理是在一个透明的flash(对用户来说是不可见的)上覆盖一个dom元素比如button或div,当点击这个dom时,实际点击的是flash,从而访问flash的剪贴板。真够曲折的。:-)

  具体的实现详见如下链接:

  DEMO页面 :  http://bowser.macminicolo.net/~jhuckaby/zeroclipboard/

  Zero Clipboard项目主页: http://code.google.com/p/zeroclipboard/

  支持浏览器:Firefox1.5  firefox2.0  firefox3.0 IE5.5 IE6.0 IE 7.0 opera 8 opera 9 chorme 1.0 chorme 2.0 safari 3

相关文章推荐

兼容多种浏览器“复制到剪贴板”的解决方案

博客分类: JavaScript 浏览器FlashFirefoxIEOpera       要实现“复制到剪贴板”的功能,安全问题,浏览器的限制越来越严,实现的方法也越来越有限,这个简单...
  • A_post
  • A_post
  • 2012年07月10日 10:14
  • 404

【原】js实现复制到剪贴板功能,兼容所有浏览器

两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低。很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能...

js实现复制到剪贴板功能,兼容所有浏览器

转自:http://www.cnblogs.com/PeunZhang/p/3324727.html 两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低...

js实现复制到剪贴板功能,兼容所有浏览器

前段时间做项目的时候,有点击按钮复制文本的需求,想使用操作windows剪切板实现,在网上查了些资料,发现目前好像只有IE支持直接访问剪切板,实现需求的时候也只做了IE中的点击复制功能,其余浏览器: ...

js实现复制到剪贴板功能,兼容所有浏览器-下载下来demo一看就明白了

【原】js实现复制到剪贴板功能,兼容所有浏览器 两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要...

【原】js实现复制到剪贴板功能,兼容所有浏览器

原文地址:http://www.cnblogs.com/PeunZhang/p/3324727.html

使用ZeroClipboard解决跨浏览器复制到剪贴板的问题

Zero Clipboard的下载地址 http://jonrohan.github.io/ZeroClipboard/ https://github.com/jonrohan/ZeroClipb...

使用ZeroClipboard解决跨浏览器复制到剪贴板的问题

导言之前在开发普加09年国庆中秋祝福页面复制链接功能时,遇见在Firefox,Chrome,Opera,Safari能复制链接的兼容性问题,而在近期上线的普加地图产品中使用的是Flash的flashv...

关于使用ZeroClipboard解决跨浏览器复制到剪贴板的问题

最近在做点击按钮把文本框的内容复制到粘贴板的功能,遇到各种浏览器兼容问题,真是要抓狂了,几经周折终于是成功解决了目前比较主流的浏览器(IE、Firefox、Chrome、360)兼容问题。...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:兼容多种浏览器“复制到剪贴板”的解决方案[转载]
举报原因:
原因补充:

(最多只允许输入30个字)