正 文：

现在浏览器种类也越来越多，诸如 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. shell学习之路（整理ing）

    学习 shell脚本之前的基础知识 http://www.92csz.com/study/linux/12.htm SHELL 脚本 http://www.92csz.com/study/linux/ ...

  2. java人民币转大写中文

    代码如下: import java.math.BigDecimal; /** * @author andy * @create 2016-08-12 18:51 */ public class Pri ...

  3. [Go语言]从Docker源码学习Go——if语句和map结构

    if语句 继续看docker.go文件的main函数 if reexec.Init() { return } go语言的if不需要像其它语言那样必须加括号,而且,可以在判断以前,增加赋值语句 语法 I ...

  4. 【MVC model 验证失效 】【Unexpected token u in JSON at position 0】【jquery-plugin-validation】

    问题描述:mvc model 调用jquery-plugin-validation 实现 前台的数据验证,时报错 Unexpected token u in JSON at position 0 很讨 ...

  5. JavaScript dotAll模式

    JavaScript正则表达式中点(.)是一个特殊字符,它可以匹配除了一下条件的任意字符. 四个字节的UTF-16字符 换行符(\n) 回车符(\r) 行分隔符 段分隔符 为了使点(.)可以匹配任意字 ...

  6. 转！！springmvc学习

    springmvc学习 https://www.cnblogs.com/baiduligang/p/4247164.html

  7. 匿名函数(lambda)在列表生成式和生成器中的应用示例

    匿名函数(lambda)在列表生成式和生成器中的应用示例 列表生成式中实例 先看题: 以下代码的输出是什么?请给出答案并解释: def func(): return [lambda x: x * i ...

  8. (转)JAVA-反射机制的使用

    Java反射机制的实现原理 反射机制:所谓的反射机制就是java语言在运行时拥有一项自观的能力.通过这种能力可以彻底的了解自身的情况为下一步的动作做准备.下面具体介绍一下java的反射机制.这里你将颠 ...

  9. 0409-服务注册与发现-Eurek Ribbon Feign常见问题及解决

    一.Eureka 1.1.Eureka Environment的配置: eureka.environment: 字符串 参考文档: https://github.com/Netflix/eureka/ ...

  10. 01 javaSe 01 抽象类和接口

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