兼容主流浏览器的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 相关文章推荐
javascript引用对象的方法
Jan 11 Javascript
Angular中的Promise对象($q介绍)
Mar 03 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 Javascript
Angular.js中处理页面闪烁的方法详解
Mar 09 Javascript
使用JavaScript实现链表的数据结构的代码
Aug 02 Javascript
js实现HTML中Select二级联动的实例
Jan 05 Javascript
Vue修改mint-ui默认样式的方法
Feb 03 Javascript
vue 父组件调用子组件方法及事件
Mar 29 Javascript
vue项目中axios请求网络接口封装的示例代码
Dec 18 Javascript
javascript实现fetch请求返回的统一拦截
Dec 22 Javascript
详解Vue之计算属性
Jun 20 Javascript
javascript+css实现俄罗斯方块小游戏
Jun 28 Javascript
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
星际中一些鲜为人知的详细资料
2020/03/04 星际争霸
DWR Ext 加载数据
2009/03/22 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
js在IE与firefox的差异集锦
2014/11/11 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
JS简单获取及显示当前时间的方法
2016/08/03 Javascript
jQuery 生成svg矢量二维码
2016/08/09 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
2017/04/01 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
vue实现键盘输入支付密码功能
2018/08/18 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
简单谈谈python中的Queue与多进程
2016/08/25 Python
Python学习小技巧之列表项的拼接
2017/05/20 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
python实现彩票系统
2020/06/28 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
python3.6 tkinter实现屏保小程序
2019/07/30 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
办理暂住证介绍信
2014/01/11 职场文书
财务总经理岗位职责
2014/02/16 职场文书
荷叶母亲教学反思
2014/04/30 职场文书
求职信格式要求
2014/05/23 职场文书
护士求职信范文
2014/05/24 职场文书
商场促销活动策划方案
2014/08/18 职场文书
2014年销售工作总结
2014/12/01 职场文书
小学家长意见怎么写
2015/06/03 职场文书
汽车修理厂管理制度
2015/08/05 职场文书
治理商业贿赂工作总结
2015/08/10 职场文书
巾帼建功标兵先进事迹材料
2016/02/29 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript
Python使用scapy模块发包收包
2021/05/07 Python