兼容主流浏览器的JS复制内容到剪贴板


Posted in Javascript onDecember 12, 2014

现在浏览器种类也越来越多,诸如 IE、Firefox、Chrome、Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了。

在FLASH 9 时代,有一个通杀所有浏览器的js复制内容到剪贴板的方案

这个方案是一个最流行的方法: 著名的Clipboard Copy解决方案 利用一个clipboard.swf作为桥梁,复制内容到剪贴板。

原理是:创建一个隐藏的flash文件,同时给给flash的变量FlashVars 赋值“clipboard=..”,通过这个赋值flash就会把复制的内容放到剪贴板。这个方法兼容IE、Firefox、Opera、chrome、 Safari,真可谓“万能”的解决方案。浏览器Flash的安装率非常高,这几乎是一个完美的解决方案。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Web开发者 - www.Admin10000.com </title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<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>

</head>

<body>

<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>

</body>

</html>

clipboard.swf 的下载地址:http://www.jeffothy.com/weblog/uploads/clipboard.php

但是 Flash 10 时代,上面的方法已经不行了。

因为flash10中规定了只有在swf上进行了真实的操作(比如鼠标点击)才能访问剪切板,而上述方法只是使用了一个隐藏的swf文件,通过javascript操作flash的剪贴板,用户并没有对swf文件进行真实的操作,因此这个方法也就失效了。

那么如何解决这个“真实操作”的问题呢?可以使用一个JavaScript库:Zero Clipboard,利用这个js库可以支持利用flash 10 实现复制到剪贴板。这个方法原理是在一个透明的flash(对用户来说是不可见的)上覆盖一个dom元素比如button或div,当点击这个dom时,实际点击的是flash,从而访问flash的剪贴板。

 以下是调试好的例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Zero Clipboard Test</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="ZeroClipboard.js"></script>

<script type="text/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="复制内容文本">

<span id="clip_container"><span id="clip_button"><strong>复制</strong></span></span>

</body>

</html>

点击下载该类库: https://3water.com/jiaoben/24961.html

调试时请上传到网站,本地直接打开flash会出错的,没权限。zeroClipboard.js文件里moviePath属性是falsh的地址,就是目录下的那个ZeroClipboard.swf存放的地址位置。

这种js复制内容到剪贴板的方案可支持浏览器:Firefox / IE / opera / chorme / safari 所有浏览器!

Javascript 相关文章推荐
用于自动添加Digg This!按钮的JavaScript
Dec 23 Javascript
IE 缓存策略的BUG的解决方法
Jul 21 Javascript
JavaScript 事件冒泡简介及应用
Jan 11 Javascript
jQuery和AngularJS的区别浅析
Jan 29 Javascript
JavaScript中使用concat()方法拼接字符串的教程
Jun 06 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 Javascript
vue如何实现observer和watcher源码解析
Mar 09 Javascript
angularjs中回车键触发某一事件的方法
Apr 24 Javascript
在 Node.js 中使用 async 函数的方法
Nov 17 Javascript
js+html5 canvas实现ps钢笔抠图
Apr 28 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
Javascript模拟加速运动与减速运动代码分享
Dec 11 #Javascript
javascript中HTMLDOM操作详解
Dec 11 #Javascript
javascript实现修改微信分享的标题内容等
Dec 11 #Javascript
javascript表单验证和Window详解
Dec 11 #Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 #Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 #Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
Dec 10 #Javascript
You might like
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
PHP中soap的用法实例
2014/10/24 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
PHP PDO操作MySQL基础教程
2017/06/05 PHP
javascript 一些用法小结
2009/09/11 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
vue中轮训器的使用
2019/01/27 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
JS代码触发事件代码实例
2020/01/02 Javascript
用实例说明python的*args和**kwargs用法
2013/11/01 Python
python Django批量导入数据
2016/03/25 Python
python下载文件记录黑名单的实现代码
2017/10/24 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
pandas中apply和transform方法的性能比较及区别介绍
2018/10/30 Python
用xpath获取指定标签下的所有text的实例
2019/01/02 Python
python 使用opencv 把视频分割成图片示例
2019/12/12 Python
Python select及selectors模块概念用法详解
2020/06/22 Python
matplotlib实现数据实时刷新的示例代码
2021/01/05 Python
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
Liu Jo西班牙官网:意大利服装品牌
2019/09/11 全球购物
作弊检讨书1000字
2014/02/01 职场文书
爱岗敬业演讲稿
2014/05/05 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
什么是创业计划书?什么是商业计划书?这里一一解答
2019/07/12 职场文书
有关信念的名言语录集锦
2019/12/06 职场文书
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript
SQL Server远程连接的设置步骤(图文)
2022/03/23 SQL Server