兼容主流浏览器的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 相关文章推荐
js 3种归并操作的实例代码
Oct 30 Javascript
yepnope.js使用详解及示例分享
Jun 23 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
JS实现DIV容器赋值的方法
Dec 14 Javascript
总结Javascript中数组各种去重的方法
Oct 04 Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 Javascript
JavaScript实现简单的树形菜单效果
Jun 23 Javascript
想用好React的你必须要知道的一些事情
Jul 24 Javascript
Angular4 组件通讯方法大全(推荐)
Jul 12 Javascript
对vux点击事件的优化详解
Aug 28 Javascript
vue中英文切换实例代码
Jan 21 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
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
PHP之sprintf函数用法详解
2014/11/12 PHP
php简单防盗链实现方法
2015/07/29 PHP
PHP 断点续传实例详解
2017/11/11 PHP
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
js取模(求余数)隔行变色
2014/05/15 Javascript
JS鼠标拖拽实例分析
2015/11/23 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
vue里面使用mui的弹出日期选择插件实例
2018/09/16 Javascript
深入解析微信小程序开发中遇到的几个小问题
2020/07/11 Javascript
编写简单的Python程序来判断文本的语种
2015/04/07 Python
Python编码类型转换方法详解
2016/07/01 Python
python3读取excel文件只提取某些行某些列的值方法
2018/07/10 Python
实例讲解python中的序列化知识点
2018/10/08 Python
python 处理telnet返回的More,以及get想要的那个参数方法
2019/02/14 Python
python 多线程重启方法
2019/02/18 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
Python配置pip国内镜像源的实现
2020/08/20 Python
怎样写好创业计划书的内容
2014/02/06 职场文书
小学毕业典礼主持词
2014/03/27 职场文书
高一新生军训方案
2014/05/12 职场文书
学校火灾防控方案
2014/06/09 职场文书
政审证明范文
2015/06/19 职场文书
工作后的感想
2015/08/07 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书
python使用glob检索文件的操作
2021/05/20 Python
MongoDB数据库的安装步骤
2021/06/18 MongoDB