正 文：

现在浏览器种类也越来越多，诸如 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. 1.0_搭建PHP服务器环境的步骤

    a,下载安装一款静态web服务器,ex:HTTPD,IIS; b,下载安装PHP引擎: c,在静态服务器配置一下,声明PHP引擎的存在. 注意,以上三步可以用xampp套件来完成. 启动Apache, ...

  2. iOS UITextView 输入内容实时更新cell的高度

    iOS UITextView 输入内容实时更新cell的高度 2014-12-26 11:37 编辑: suiling 分类:iOS开发 来源:Vito Zhang'blog  11 4741 UIT ...

  3. 160719、Spring + Dubbo + zookeeper (linux) 框架搭建

    转载一篇博客,写得不错(至少我参考一下搭建成功了) 转载地址:http://my.oschina.net/wangt10/blog/522799 dubbo简介 节点角色说明: Provider: 暴 ...

  4. Less-mixin判断（守卫）二

    mixin卫士--判断 或与且语法 且:()and() 或:(),() --且 examlpe: .test(@a) when (isNumber(@a)) and (@a>=5){ font- ...

  5. 用jQuery实现简单的DOM操作

    通过jQuery创建元素节点:$oLi = $("<li></li>");这样我们就创建了一个li标签 如果想在元素节点中添加文本的话也挺简单:$oLi = ...

  6. Commit message 的写法规范。本文介绍Angular 规范（

    Commit message 的写法规范.本文介绍Angular 规范( http://www.ruanyifeng.com/blog/2016/01/commit_message_change_lo ...

  7. python pip源配置,pip配置文件存放位置

    https://blog.csdn.net/u013066730/article/details/54580789/ pip源配置文件可以放置的位置: Linux/Unix: /etc/pip.con ...

  8. 搞懂head 和 tail 命令

    情景 会点linux命令的人都知道head -n k和tail -n k(k≥0)的作用,但却不知道还支持head -n -k和tail -n +k的用法, 更不知道有着怎样的作用了. 图解 下面,用 ...

  9. Making the Grade---poj3666（类似离散化+dp）

    题目链接:http://poj.org/problem?id=3666 题意是给出一组数,每个数代表当前位置的地面高度,问把路径修成非递增或者非递减,需要花费的最小代价? ///用dp[i][j]表示 ...

  10. pop 在列表中和字典中的区别

    pop 在列表中和字典中的区别 字典中 pop() 语法:dict.pop(key,[value]) 说明:删除指定键及对应的值,如果在字典中不存在键及value,则返回pop()中指定的key对应的 ...