兼容主流浏览器的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判断窗口是否最小化的代码(跨浏览器)
Aug 01 Javascript
javascript 冒泡排序 正序和倒序实现代码
Dec 14 Javascript
ajax的hide隐藏问题解决方法
Dec 11 Javascript
bootstrap改变按钮加载状态
Dec 01 Javascript
JS实现带鼠标效果的头像及文章列表代码
Sep 27 Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 Javascript
JavaScript 是什么意思
Sep 22 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
利用javascript如何随机生成一定位数的密码
Sep 22 Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 Javascript
js简单粗暴的发布订阅示例代码
Jan 23 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
如何从一个php文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
php download.php实现代码 跳转到下载文件(response.redirect)
2009/08/26 PHP
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
php session实现多级目录存放实现代码
2016/02/03 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
注释PHP和html混合代码的小技巧(分享)
2016/11/03 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
php创建多级目录与级联删除文件的方法示例
2019/09/12 PHP
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
jQuery下的动画处理总结
2013/10/10 Javascript
基于JavaScript操作DOM常用的API小结
2015/12/01 Javascript
jQuery EasyUI Pagination实现分页的常用方法
2016/05/21 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
超全面的JavaScript开发规范(推荐)
2017/01/21 Javascript
node中使用es5/6以及支持性与性能对比
2017/08/11 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
vue 路由守卫(导航守卫)及其具体使用
2020/02/25 Javascript
JS对象属性的检测与获取操作实例分析
2020/03/17 Javascript
[00:32]DOTA2上海特级锦标赛 COL战队宣传片
2016/03/04 DOTA
Python中给List添加元素的4种方法分享
2014/11/28 Python
分享6个隐藏的python功能
2017/12/07 Python
python决策树之CART分类回归树详解
2017/12/20 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
Python3.9新特性详解
2020/10/10 Python
Meli Melo官网:名媛们钟爱的英国奢侈手包品牌
2017/04/17 全球购物
什么是servlet
2012/05/08 面试题
大学生四年生活自我鉴定
2013/11/21 职场文书
心得体会怎么写
2013/12/30 职场文书
理财投资建议书
2014/03/12 职场文书
店长岗位职责
2015/02/11 职场文书
离婚起诉书范本
2015/05/18 职场文书
亮剑观后感300字
2015/06/05 职场文书
SQL Server基本使用和简单的CRUD操作
2021/04/05 SQL Server