兼容主流浏览器的JS复制内容到剪贴板
现在浏览器种类也越来越多，诸如 IE、Firefox、Chrome、Safari等等，因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了。
在FLASH 9 时代，有一个通杀所有浏览器的js复制内容到剪贴板的方案：
这个方案是一个最流行的方法: 著名的Clipboard Copy解决方案 利用一个clipboard.swf作为桥梁，复制内容到剪贴板。
原理是：创建一个隐藏的flash文件，同时给给flash的变量FlashVars 赋值“clipboard=..”，通过这个赋值flash就会把复制的内容放到剪贴板。这个方法兼容IE、Firefox、Opera、chrome、 Safari，真可谓“万能”的解决方案。浏览器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>
<title>Web开发者 - www.Admin10000.com </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var clipboardswfdata;
var setcopy_gettext = function(){
clipboardswfdata = document.getElementById('test_text').value;
//alert(clipboardswfdata);
window.document.clipboardswf.SetVariable('str', clipboardswfdata);
}
var floatwin = function(){
alert('复制成功！');
//document.getElementById('clipinner').style.display = 'none';
}
</script>
</head>
<body>
<textarea id="test_text" rows="15" cols="100">文本內容.......</textarea>
<div id="clipboard_content">
<div class="my_clip_button"><span class="clipinner" id="clipinner">复制代码到剪切板
<embed name="clipboardswf" class="clipboardswf" id="clipboardswf" onmouseover="setcopy_gettext()" devicefont="false" src="./_clipboard.swf" menu="false" allowscriptaccess="sameDomain" swliveconnect="true" wmode="transparent" type="application/x-shockwave-flash" height="20" width="100">
</span>
</div>
</div>
</body>
</html>
clipboard.swf 的下载地址：http://www.jeffothy.com/weblog/uploads/clipboard.php
但是 Flash 10 时代，上面的方法已经不行了。
因为flash10中规定了只有在swf上进行了真实的操作（比如鼠标点击）才能访问剪切板，而上述方法只是使用了一个隐藏的swf文件，通过javascript操作flash的剪贴板，用户并没有对swf文件进行真实的操作，因此这个方法也就失效了。
那么如何解决这个“真实操作”的问题呢？可以使用一个JavaScript库：Zero Clipboard，利用这个js库可以支持利用flash 10 实现复制到剪贴板。这个方法原理是在一个透明的flash（对用户来说是不可见的）上覆盖一个dom元素比如button或div，当点击这个dom时，实际点击的是flash，从而访问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>
<title>Zero Clipboard Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script type="text/javaScript">
var clip = null;
function $(id) { return document.getElementById(id); }
function init() {
clip = new ZeroClipboard.Client();
clip.setHandCursor(true);
clip.addEventListener('mouseOver', function (client) {
// update the text on mouse over
clip.setText( $('fe_text').value );
});
clip.addEventListener('complete', function (client, text) {
//debugstr("Copied text to clipboard: " + text );
alert("该地址已经复制，你可以使用Ctrl+V 粘贴。");
});
clip.glue('clip_button', 'clip_container' );
}
</script>
</head>
<body onLoad="init()">
<input id="fe_text" cols="50" rows="5" value="复制内容文本">
<span id="clip_container"><span id="clip_button"><strong>复制</strong></span></span>
</body>
</html>
点击下载该类库： http://www.jb51.net/jiaoben/24961.html
调试时请上传到网站，本地直接打开flash会出错的，没权限。zeroClipboard.js文件里moviePath属性是falsh的地址，就是目录下的那个ZeroClipboard.swf存放的地址位置。
这种js复制内容到剪贴板的方案可支持浏览器：Firefox / IE / opera / chorme / safari 所有浏览器！
相关推荐
-
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能会更大.成长以来,很多朋友也听说到不少激励自己上进的话,但不是每个人都能一直坚持做下来,其实,这个跟自己的性格以及周围的环境都有很大关系,只能说多找方法.条件给自己鼓励,不断提高对自己的要求,才有机会获得多一点的成就. 今年下半年打算在组内建个叫『移动开发指南』的站点,在网站框架搭建过程,有一个功能
-
表单提交时自动复制内容到剪贴板的js代码
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>交时自动复制到剪贴板</title> </head> <script language="JavaScript"> /*功能:提交时自动复制到剪贴板 */ function copyTe
-
JS复制到剪贴板示例代码
复制代码 代码如下: /* * 复制到剪贴板 * * */ function copyToClipboard(txt) { if(window.clipboardData) { window.clipboardData.clearData(); window.clipboardData.setData("Text", txt); } else if(navigator.userAgent.indexOf("Opera") != -1) { window.locati
-
多浏览器兼容性比较好的复制到剪贴板的js代码
对于非ie浏览器他是用flash来实现的,js代码如下: 复制代码 代码如下: <script type="text/javascript"> function copy_code(copyText) { if (window.clipboardData) { window.clipboardData.setData("Text", copyText) } else { var flashcopier = 'flashcopier'; if(!docum
-
js复制内容到剪贴板代码,js复制代码的简单实例
如下所示: <script type="text/JavaScript"> function jsCopy(){ var e=document.getElementById("contents");//对象是contents e.select(); //选择对象 document.execCommand("Copy"); //执行浏览器复制命令 } </script> <textarea id="conte
-
js实现点击后将文字或图片复制到剪贴板的方法
本文实例讲述了js实现点击后将文字或图片复制到剪贴板的方法,代码非常简洁实用,具体功能代码如下所示: 实现复制文字代码: <table width="99%" border="0" cellpadding="0" cellspacing="0" class="firtable"> <tr> <th width="100%" style="color
-
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
但是用flash就可以复制.例子就是VeryCd,看"复制选中的连接"按钮是一个flash.看来flash的安全沙箱没有限制将内容复制到剪贴板 但是也是有限制的: 1 根据ZeroClipborad的人们说,这些flash必须通过网络加载. Zero Clipboard Does Not Work From Local Disk This is a security restriction by Adobe Flash Player. Unfortunately, since we a
-
js实现点击复制当前文本到剪贴板功能（兼容所有浏览器）
最近做项目时,在网站框架搭建过程,有一个功能需要实现复制文本到剪贴板,相信这个功能很常用,但是对于不常写JS代码的我来说是一个比较大的挑战,回想以前做过的一个站点,使用window.clipboardData实现复制到剪贴板功能,也仅仅支持IE和FF浏览器,当时在百度找个几个方案,看不下去就放弃了,后来在代码中做了判断,如果不支持该属性,就直接alert:此功能不支持该浏览器,请手工复制文本框中内容.有没有人遇到同样情况? alert("此功能不支持该浏览器,请手工复制文本框中内容")
-
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
目前,如果使用javascript来写复制到剪贴板的代码,一般都是浏览器不兼容的.所以采用flash的方式,模拟一个层,再来复制,就可以做到全部浏览器都适用哦~ 需要下载一个swf文件,和一个js文件.把这两个文件,和htm放到一起. 图示: 必须放在服务器端使用哦. 图示: JS代码: 复制代码 代码如下: ZeroClipboard.js // Simple Set Clipboard System // Author: Joseph Huckaby var ZeroClipboard =
-
一段多浏览器的"复制到剪贴板"javascript代码
代码如下,就不多说废话了,可以兼容基本上所有的主流浏览器(IE,FF),很多地方可以用到的: copyToClipboard = function(txt) { if(window.clipboardData) { window.clipboardData.clearData(); window.clipboardData.setData("Text", txt); } else if(navigator.userAgent.indexOf("Opera"
-
JS实现复制内容到剪贴板功能
前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroClipboard.js). ZeroClipboard.js在Git上的地址为:https://github.com/zeroclipboard/zeroclipboard 注意:此js库不支持兼容手机端(包括Android.IOS),仅支持PC端浏览器. 第一步:将插件库引入到工程中. 把Git上
-
用js将内容复制到剪贴板兼容浏览器
若想通过js将内容复制到剪贴板,本来不难,可是若考虑到浏览器的兼容性问题,就变的有点麻烦,使用jquery-zclip复制是一个不错的选择,借助flash实现浏览器的兼容.原理就不细讲了,下面说下如何实现. 比如我的html代码如下: 复制代码 代码如下: <div class="buttonBox"> <code rel="1"><span id="id_1">要复制的内容1</span><