正 文:

现在浏览器种类也越来越多,诸如 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. c语言加密算法头文件下载(base64、md5、sha1)

    1.base64 网上有一份开头就是 // Encoding lookup table char base64encode_lut[] = {  的base64.h, 在loadrunner中加密有b ...

  2. [Go语言]从Docker源码学习Go——指针和Structs

    这两天在看reflect这个包在Docker中的使用时,遇到了各种问题,最后虽然知道怎么用了. 但是对于这块的原理还不是太懂,于是把"THE WAY TO GO"中关键的几章看了下 ...

  3. linux 项目自动部署脚本

    1.使用maven获取源码部署,并可替换配置文件(金融数据分析平台) #!/bin/bash#设置变量cd /home#停止tomcatecho "开始停止tomcat..." p ...

  4. CodeForces 156B Suspects(枚举)

    B. Suspects time limit per test 2 seconds memory limit per test 256 megabytes input standard input o ...

  5. visual studio 2017 编译v140 TRACKER : error TRK0005: Failed to locate: "CL.exe". 系统找不到指定的文件

    原因可能是vs2017中配置v140 的编译命令路径有问题 解决方案: 用vs2017的在线安装程序,选择修改 进去后选择单个组建,在编译器.生成工具和运行时里面把vc++2015.3…… 打钩的取消 ...

  6. 轻松理解MYSQL MVCC 实现机制

    轻松理解MYSQL MVCC 实现机制 转载https://blog.csdn.net/whoamiyang/article/details/51901888 1. MVCC简介 1.1 什么是MVC ...

  7. (4.7)sql server2008 中的merge

    简介 Merge关键字是一个神奇的DML关键字.它在SQL Server 2008被引入,它能将Insert,Update,Delete简单的并为一句.MSDN对于Merge的解释非常的短小精悍:”根 ...

  8. 修改 item2 用户名

    首先在命令行输入 cd .oh-my-zsh/themes 如下图: 然后命令行输入 sudo vi agnoster.zsh-theme 如下图: 最后在编辑主题文件 在 prompt_segmen ...

  9. python16_day13【css、js】

    一.部局 1.pg-header(title) .pg-header{ height: 48px; background-color: cadetblue; line-height: 48px; mi ...

  10. beego——URL构建

    如果可以匹配URl,那么beego也可以生成URL吗?当然可以. UrlFor()函数就是用于构建执行函数的URL的.它把对应控制器和函数名结合的字符串作为第一个参数,其余参数对应URL中的变量.未知 ...