正 文：

现在浏览器种类也越来越多，诸如 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. JStorm开发经验+运维经验总结

    1.开发经验总结  ——12 Sep 2014 · 8 revisions 在jstorm中, spout中nextTuple和ack/fail运行在不同的线程中, 从而鼓励用户在nextTuple里 ...

  2. LightOJ - 1422 （Halloween Costumes）

    题目链接:传送门 题目大意:要参加聚会,对应聚会要穿对应衣服,衣服可以套着穿,也可以脱下来,但脱下来之后不能再穿,问参加完所有聚会至少需要几件衣服? 题目思路:区间DP 一开始自己没有想出来状态转移方 ...

  3. JZOJ.5275【NOIP2017模拟8.14】水管

    Description

  4. 160623、理解 Promise 的工作原理

    Javascript 采用回调函数(callback)来处理异步编程.从同步编程到异步回调编程有一个适应的过程,但是如果出现多层回调嵌套,也就是我们常说的厄运的回调金字塔(Pyramid of Doo ...

  5. Office word中去掉首页的页眉

    1.首先将光标位置移动到第二页的开始,然后点击页面布局命令. 2.页面布局里面找到分隔符,找到下一页的分隔符.(分页符分页) 3.双击第二页的页眉,打开页眉编辑菜单.将连接到前一条页眉的命令去掉. 4 ...

  6. 指定文件夹 指定文件后缀名 删除整个文件夹 git 冲突解决 create a new repository on the command line push an existing repository from the command line

    http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/001375840038939c2 ...

  7. jsp tutorial

    http://blog.csdn.net/JavaEETeacher/article/details/1932447

  8. <2014 08 29> MATLAB的软件结构与模块、工具箱简示

    MATLAB的系统结构:三个层次.九个部分 ----------------------------------- 一.基础层 是整个系统的基础,核心内容是MATLAB部分. 1.软件主包MATLAB ...

  9. jQuery实现图片预览

    摘自:http://www.cnblogs.com/leejersey/p/3660202.html JS代码: /* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月2 ...

  10. javascript教程2:---DOM操作

    1.DOM 简介 当页面加载时,浏览器会创建页面的文档对象模型(Document Object Model).文档对象模型定义访问和处理 HTML 文档的标准方法.DOM 将 HTML 文档呈现为带有 ...