正 文：

现在浏览器种类也越来越多，诸如 IE、Firefox、Chrome、Safari等等，因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了。

在FLASH 9 时代，有一个通杀所有浏览器的js复制内容到剪贴板的方案：

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

JS部分：

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

　　

HTML部分：

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

　　

clipboard.swf 的下载地址：_clipboard.rar.rar

 但是 Flash 10 时代，上面的方法已经不行了。
    因为flash10中规定了只有在swf上进行了真实的操作（比如鼠标点击）才能访问剪切板，而上述方法只是使用了一个隐藏的swf文件，通过javascript操作flash的剪贴板，用户并没有对swf文件进行真实的操作，因此这个方法也就失效了。

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

飘易拿来我调试好的小例子：

<html>

<head>

<title>Zero Clipboard Test</title>

<script type="text/javascript" src="ZeroClipboard.js"></script>

<script language="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=复制内容文本1 >

<span id="clip_container"><span id="clip_button"><b>复制</b></span></span>

</body>

</html>

　　

飘易提供的例子下载：zeroclipboard.rar

调试时请上传到网站，本地直接打开flash会出错的，没权限。zeroClipboard.js文件里moviePath属性是falsh的地址，就是目录下的那个ZeroClipboard.swf存放的地址位置。

这种js复制内容到剪贴板的方案可支持浏览器：Firefox / IE / opera / chorme / safari 所有浏览器！

参考：
http://it.nekounya.com/javascript-ie-firefox-compatible-copy-to-clipboard.html
http://www.watch-life.net/javascript/copy-to-clipboard-solution.html
http://www.cnwebskill.com/Web_230.aspx

转载出处：http://www.piaoyi.org/web-css/js-copy-clipboard.html

JS复制内容到剪贴板: 兼容IE、Firefox、Chrome、Safari所有浏览器【转】的更多相关文章

  1. JS复制内容到剪贴板(兼容FF/Chrome/Safari所有浏览器)

    现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏 ...

  2. Zclip点击复制内容到剪贴板兼容各浏览器

    WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内容将会被复制, ...

  3. js复制内容到剪贴板

    我们web上的复制,有时候尽管可以用鼠标选中,然后复制,但是某些时候,文字不方便选中.因此,我们自定义一个复制按钮,然后通过点击它,把想要的内容复制到剪贴板上.我归纳总结了几种方法: 1.ZeroCl ...

  4. js复制内容到剪贴板格式化粘贴到excel中

    <input id="Button1" type="button" value="导出EXCEL" onclick="cop ...

  5. JS实现复制到剪贴板(兼容FF/Chrome/Safari所有浏览器)

    现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏 ...

  6. 《JS实现复制内容到剪贴板功能，可兼容所有PC浏览器，不兼容手机端》

    前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroC ...

  7. Zclip复制页面内容到剪贴板兼容各浏览器

    Zclip:复制页面内容到剪贴板兼容各浏览器 WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮 ...

  8. Zclip:复制页面内容到剪贴板兼容各浏览器

    WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内容将会被复制, ...

  9. 简单实现兼容各大浏览器的js复制内容到剪切板

    因为网站文章需要提供几个按钮,单击后实现复制文章内容到剪贴板. 在网上搜索了很多内容,发现都比较乱这里自己整理下,分享给大家 效果图如下: 之前使用的是window.clipboardData.set ...

随机推荐

  1. 《转》适用于开发人员的10个最佳ASP.NET的CMS系统

    1) mojoportal mojoPortal 是一个开源的.用 C# 编写的站点框架和内容管理系统,可以运行在 Windows 中的 ASP.NET 和 Linux/Mac OS X 中的 Mon ...

  2. cxGrid 根据列值变色(样式)

    在使用cxGrid的过程中,某一个单元格经常需要根据其他单元格的值来做相应的变色,如: 在cxGridDBTableView中,选定要变样式(如背景色.字体属性等)的列, 打开事件Events -&g ...

  3. 【BZOJ3875】[Ahoi2014&Jsoi2014]骑士游戏 SPFA优化DP

    [BZOJ3875][Ahoi2014&Jsoi2014]骑士游戏 Description  [故事背景] 长期的宅男生活中,JYY又挖掘出了一款RPG游戏.在这个游戏中JYY会扮演一个英勇的 ...

  4. jpa关联映射

    参考:http://www.cnblogs.com/printN/p/6408818.html 官方文档:http://docs.jboss.org/hibernate/orm/5.2/usergui ...

  5. 选项卡jQuery(ele).each()

    $("li").each(index){    $(this).mouseover(fucntion(){           $("div.contentin" ...

  6. Android性能测试摘入（TestHome）

    Android性能测试:      客户端性能测试      服务端性能测试   客户端性能测试:      1.ROM版本的性能测试(即手机的不同操作系统):关注功耗测试      2.应用的性能测 ...

  7. 我的Android进阶之旅------>Java字符串格式化方法String.format()格式化float型时小数点变成逗号问题

    今天接到一个波兰的客户说有个APP在英文状态下一切运行正常,但是当系统语言切换到波兰语言的时候,程序奔溃了.好吧,又是我来维护. 好吧,先把系统语言切换到波兰语,切换到波兰语的方法查看文章 我的And ...

  8. DRF(1) - REST、DRF(View源码解读、APIView源码解读)

    一.REST 1.什么是编程? 数据结构和算法的结合. 2.什么是REST? 首先回顾我们曾经做过的图书管理系统,我们是这样设计url的,如下: /books/ /get_all_books/ 访问所 ...

  9. 01 javaSe 01 抽象类和接口

      抽象类 接口   目录(?)[-] 1 抽象类与接口是面向对象思想层面概念不是程序设计语言层面概念 2 抽象类是本体的抽象接口是行为的抽象 3 C中抽象类与接口的探讨     目录(?)[+]   ...

  10. python 的两个模块xlwt,xlrd,写入和读取Excel数据

    http://www.cnblogs.com/fireme/p/3887284.html 这上面写的很全,不过我只需要简单的读和写的操作就ok了,下面是我写的读和写入Excel操作 读取Excel数据 ...