正 文：

现在浏览器种类也越来越多，诸如 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. Codeforces Round #361 (Div. 2) E. Mike and Geometry Problem

    题目链接:传送门 题目大意:给你n个区间,求任意k个区间交所包含点的数目之和. 题目思路:将n个区间都离散化掉,然后对于一个覆盖的区间,如果覆盖数cnt>=k,则数目应该加上 区间长度*(cnt ...

  2. 【BZOJ2194】快速傅立叶之二

    [BZOJ2194]快速傅立叶之二 Description 请计算C[k]=sigma(a[i]*b[i-k]) 其中 k < = i < n ,并且有 n < = 10 ^ 5. ...

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

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

  4. python中matplotlib绘图封装类之折线图、条状图、圆饼图

    DrawHelper.py封装类源码: import matplotlib import matplotlib.pyplot as plt import numpy as np class DrawH ...

  5. Logon Session Times

    How to Get User Logon Session Times from the Event Log To figure out user session time, you’ll first ...

  6. bootstrap-datetimepicker 滚动错位问题

    问题:在页面上弹出控件的时候,滚动后面页面,时间控件就会错位. 解决方法1: 搜索bootstrap-datetimepicker.js里面的"show:"方法,在this.pla ...

  7. ios cocos2d 使用 sneakyInput 插件

    昨晚看了篇使用sneakyInput插件实现模拟手柄的代码,不过我加上后出现了很多问题.最后只看如何实现,没有自己动手去操作.今天终于吧问题都解决了.记录下来.也供别人参考. 首先要先加入libz.d ...

  8. oracle在drop表时要注意

    在oracle中,比如 drop table STC_GHSLB; 系统同时自动删除的有这个表的主键.索引.trigger. 不能同时自动删除的有:sequence. 因为sequence不跟表关联, ...

  9. [luogu4556]雨天的尾巴

    [luogu4556]雨天的尾巴 luogu 发现是一顿子修改然后再询问,那么把修改树上差分一下再线段树合并 但是... 如果你只有35分... https://www.luogu.org/discu ...

  10. 五分钟学会 Kotlin 语法

    为什么使用Kotlin 项目一期在收尾了终于有时间折腾了,一个多月以来Kotlin从入门到现在,坚持用来开发的切身感受.因为语法与Java的区别挺大的一开始很想放弃,如果不是因为项目在使用,想必很少人 ...