兼容浏览器的复制到剪贴板代码
成功志
兼容浏览器的复制到剪贴板代码
2012-6-27 ok12

关于这个问题,目前网上大部分的代码都是只兼容IE的。因为之前实现这个功能都是用到了一个IE的控件。但前不久做一个任务的时候也碰到了这个需求,但是要全兼容,所以就找了一下,现在有了一种新的办法来解决这个问题,是通过一个FLASH来解决的。


原理其实很简单,是利用了AS3中的 System.setClipboard() 方法,因为是通过FLASH实现的,所以没有浏览器上的兼容性问题,用法如下:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <SCRIPT type=text/javascript>  function copy(meintext) {

  if (window.clipboardData) {

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

  } 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(meintext)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';

     document.getElementById(flashcopier).innerHTML = divinfo;

 }

 alert('地址已经复制到您的剪贴板!');

 }</SCRIPT> </head>  <body> <input type="button" value="复制本文链接" onclick="javascript:copy(window.location.href);return false;" /> </body> </html>

其中的 src=”_clipboard.swf” ,路径换成你自己的路径,文件下载见最后附件


另外办法:


1、在这里介绍一个:zeroclipboard。同样也是利用FLASH来实现的,所以浏览器的兼容性是没有问题的。


2、现在很多项目都会用到jquery,用的时候需要注意,尽可能用$(window).load(),


因为如果用$(document).ready()的话会有可能在还没被加载的情况下就运行了,会复制失效。


对于用jquery框架的朋友,这里推荐一个专门针对jquery的版本:zClip


发表评论:
昵称

邮件地址 (选填)

个人主页 (选填)

内容