ZeroClipboard支持IE,firefox,Chrome复制到剪贴板(转)
2012-07-17 10:27
579 查看
在说到ZeroClipboard之前,先说说为何会用到ZeroClipboard。有时候需要在触发某JavaScript事件的同时,将某段文本复制到剪贴板。比如直接通过点击某复制按钮,将textarea中的内容复制到剪贴板,就不用先全选内容,再Ctrl+C了。另外如果在复制的同时,要记录这段文本被复制使用的次数,一般的方法是可以使用js脚本代码,在执行复制之后,执行form submit,提交一次则该文本被使用的次数计数器加1。
若不考虑浏览器的兼容性,只要支持IE浏览器,则可以使用IE浏览器支持的window.clipboardData对象(js dom对象)的setData方法,如window.clipboardData.setData (“Text”,txt); 不过该window对象实现复制到剪贴板并不支持Firefox浏览器,当然更不支持Google Chrome浏览器。针对兼容火狐Firefox浏览器的js代码,可以用类似下面的这段JavaScript脚本实现复制。
方法一(兼容ie和firefox):
上面的JavaScript针对使用最多的两大主流浏览器:IE(IE6,IE7,IE8)和Firefox都可以实现复制到剪贴板功能。但是这段js脚本代码对使用用户群体越来越高的Google Chrome浏览器仍无法兼容。
这时候ZeroClipboard就派上用场了。ZeroClipboard使用一段隐藏的Adobe Flash 视频和JavaScript接口,简单实现复制文本到剪贴板的功能。只要用户的浏览器安装了adobe flash,就可以使用,adobe flash的安装率很高,同时兼容最新的adobe flash player 10。剪贴板复制操作由falsh里的一个用户点击事件触发。最新发布的版本是Zero Clipboard 1.0.7,下载Zero Clipboard。
Zero Clipboard下载完毕之后,在解压的文件夹中复制 ZeroClipboard.js 和 ZeroClipboard.swf 到网站目录中,若要启用支持adobe flash 10的Rich Html 属性,则还要将ZeroClipboard10.swf也复制过来。最好将它们放在和使用该js的html代码同一级的目录中,否则需要设置指明ZeroClipboard.swf 所在的目录路径。Zero Clipboard使用如下实例:
Zero Clipboard 使用实例的说明在上面已经注明,Zero Clipboard使用起来还是比较简单的,使用过程中注意次序,ZeroClipboard.js->HTML代码–>创建ZeroClipboard对象的JavaScript代码–>…–>clip.glue(),尤其是一个页面上需要创建多个ZeroClipboard复制到剪贴板对象时。
在IE7.0中,最后的这段JavaScript代码不宜放在表格table,td等标签中。在Firefox浏览器中,拉动滚动条至隐藏Zero Clipboard的复制框后,需双击才能复制成功。在Google Chrome浏览器中,当前的测试完全兼容。为了有利于保护安全性,Internet explorer会限制网页运行可以访问计算机的脚本和ActiveX控件,因此Zero Clipboard在本地磁盘上测试无法使用,必须在网络上测试,如http://localhost…
http://code.google.com/p/zeroclipboard/
http://zeroclipboard.googlecode.com/files/zeroclipboard-1.0.7.tar.gz
转自:http://farlee.info/archives/zeroclipboard-ie7-8-firefox-chrome-copy-text.html
若不考虑浏览器的兼容性,只要支持IE浏览器,则可以使用IE浏览器支持的window.clipboardData对象(js dom对象)的setData方法,如window.clipboardData.setData (“Text”,txt); 不过该window对象实现复制到剪贴板并不支持Firefox浏览器,当然更不支持Google Chrome浏览器。针对兼容火狐Firefox浏览器的js代码,可以用类似下面的这段JavaScript脚本实现复制。
方法一(兼容ie和firefox):
<script type="text/javascript"> function copyCode(id){ var testCode=document.getElementById(id).value; if(copy2Clipboard(testCode)!=false){ document.form1.submit(); //复制成功后提交表单,记录复制到剪贴板的使用次数 } } copy2Clipboard=function(txt){ if(window.clipboardData){ //判断是否是IE浏览器 window.clipboardData.clearData(); window.clipboardData.setData("Text",txt); } //else if(navigator.userAgent.indexOf("Opera")!=-1){ // window.location=txt; // } else if(window.netscape){ //Firefox浏览器 try{ netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); } catch(e){ alert("您的firefox安全限制限制您进行剪贴板操作,请打开’about:config’将signed.applets.codebase_principal_support’设置为true’之后重试,相对路径为firefox根目录/greprefs/all.js"); 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); } } </script> HTML代码: <input type="button" name="title" onclick="copyCode('copyid');return false;" value="【点击复制】" width="100px" height="23"> <textarea id="copyid"><?php echo $content; ?></textarea>
上面的JavaScript针对使用最多的两大主流浏览器:IE(IE6,IE7,IE8)和Firefox都可以实现复制到剪贴板功能。但是这段js脚本代码对使用用户群体越来越高的Google Chrome浏览器仍无法兼容。
这时候ZeroClipboard就派上用场了。ZeroClipboard使用一段隐藏的Adobe Flash 视频和JavaScript接口,简单实现复制文本到剪贴板的功能。只要用户的浏览器安装了adobe flash,就可以使用,adobe flash的安装率很高,同时兼容最新的adobe flash player 10。剪贴板复制操作由falsh里的一个用户点击事件触发。最新发布的版本是Zero Clipboard 1.0.7,下载Zero Clipboard。
Zero Clipboard下载完毕之后,在解压的文件夹中复制 ZeroClipboard.js 和 ZeroClipboard.swf 到网站目录中,若要启用支持adobe flash 10的Rich Html 属性,则还要将ZeroClipboard10.swf也复制过来。最好将它们放在和使用该js的html代码同一级的目录中,否则需要设置指明ZeroClipboard.swf 所在的目录路径。Zero Clipboard使用如下实例:
CSS: <style type="text/css"> #d_clip_button { width:150px; text-align:center; border:1px solid black; background-color:#ccc; margin:10px; padding:10px; } #d_clip_button.hover{ background-color:#eee; } #d_clip_button.active{ background-color:#aaa; } </style> html: <script type="text/javascript" src="/js/zero/ZeroClipboard.js"></script> <div id="d_clip_button">【点击复制】</div> <textarea rows=2 id="copyid"><?php echo $content; ?></textarea> <script language="JavaScript"> ZeroClipboard.setMoviePath( '/js/zero/ZeroClipboard.swf' ); //和copy.php不在同一目录需设置setMoviePath ZeroClipboard.setMoviePath( '/js/zero/ZeroClipboard10.swf' ); var clip = new ZeroClipboard.Client(); //创建新的Zero Clipboard对象 clip.setText( '' ); // will be set later on mouseDown //清空剪贴板 clip.setHandCursor( true ); //设置鼠标移到复制框时的形状 clip.setCSSEffects( true ); //启用css clip.addEventListener( 'load', function(client) { // alert( "movie is loaded" ); } ); clip.addEventListener( 'complete', function(client, text) { //复制完成后的监听事件 // alert("Copied text to clipboard: " + text ); document.form1.submit(); // 复制到剪贴板成功后提交表单 clip.hide(); // 复制一次后,hide()使复制按钮失效,防止重复计算使用次数 } ); clip.addEventListener( 'mouseOver', function(client) { // alert("mouse over"); } ); clip.addEventListener( 'mouseOut', function(client) { // alert("mouse out"); } ); clip.addEventListener( 'mouseDown', function(client) { // set text to copy here clip.setText( document.getElementById('copyid').value ); // alert("mouse down"); } ); clip.addEventListener( 'mouseUp', function(client) { // alert("mouse up"); } ); clip.glue( 'd_clip_button' ); </script>
Zero Clipboard 使用实例的说明在上面已经注明,Zero Clipboard使用起来还是比较简单的,使用过程中注意次序,ZeroClipboard.js->HTML代码–>创建ZeroClipboard对象的JavaScript代码–>…–>clip.glue(),尤其是一个页面上需要创建多个ZeroClipboard复制到剪贴板对象时。
在IE7.0中,最后的这段JavaScript代码不宜放在表格table,td等标签中。在Firefox浏览器中,拉动滚动条至隐藏Zero Clipboard的复制框后,需双击才能复制成功。在Google Chrome浏览器中,当前的测试完全兼容。为了有利于保护安全性,Internet explorer会限制网页运行可以访问计算机的脚本和ActiveX控件,因此Zero Clipboard在本地磁盘上测试无法使用,必须在网络上测试,如http://localhost…
http://code.google.com/p/zeroclipboard/
http://zeroclipboard.googlecode.com/files/zeroclipboard-1.0.7.tar.gz
转自:http://farlee.info/archives/zeroclipboard-ie7-8-firefox-chrome-copy-text.html
相关文章推荐
- ZeroClipboard支持IE,firefox,Chrome复制到剪贴板
- ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
- 支持所有浏览器的复制文本到剪切板的ASP代码(IE/Firefox/Opera/netscape/chrome/safari)
- ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
- 复制链接到剪贴板,兼容Firefox,Chrome, IE
- BX2001: IE 支持使用 window.clipboardData 访问系统剪贴板,Chrome 和 Safari 中存在类似的 Clipboard 对象但尚未实现,Firefox 和 Opera 不支持这类对象
- js 复制到剪贴板 ,兼容支持火狐firefox 和 ie
- 通过javascript将input输入框的值复制拷贝到剪贴板clipboard,支持ie,firefox
- JS复制内容到剪贴板: 兼容IE、Firefox、Chrome、Safari所有浏览器【转】
- 一直都需要的复制到系统剪贴板之IE,firefox兼容版
- HTML5视频方案:支持iPad Safari、Firefox、Chrome、IE9876
- JS 在页面上直接将json数据导出到excel,支持chrome,edge,IE10+,IE9,IE8,Safari,Firefox
- 基于raphael 的图形变化(支持firefox,chrome,IE, opera)
- css的pointer鼠标类型详解(支持IE,firefox,chrome)
- 复制到剪切板 - 兼容 ie, firefox, chrome & flash10
- [完美]原生JS获取浏览器版本判断--支持Edge,IE,Chrome,Firefox,Opera,Safari,以及各种使用Chrome和IE混合内核的浏览器
- js实现复制到剪贴板(IE,firefox)
- js 复制内容到剪贴板(兼容IE,Firefox)
- js 复制功能 支持 for IE/FireFox/mozilla/ns
- 基于raphael 的图形变化(支持firefox,chrome,IE, opera)