兼容主流浏览器的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 相关文章推荐
关闭浏览器时提示onbeforeunload事件
Dec 25 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
又一枚精彩的弹幕效果jQuery实现
Jul 25 Javascript
JS实现页面数据无限加载
Sep 13 Javascript
Angular Module声明和获取重载实例代码
Sep 14 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
基于Vuejs和Element的注册插件的编写方法
Jul 03 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
Sep 25 Javascript
React学习笔记之高阶组件应用
Jun 02 Javascript
vue组件挂载到全局方法的示例代码
Aug 02 Javascript
react-router4按需加载(踩坑填坑)
Jan 06 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与SQL注入攻击[三]
2007/04/17 PHP
PHP 存储文本换行实现方法
2010/01/05 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
JavaScript 字符串连接性能优化
2008/12/20 Javascript
jQuery :first选择器使用介绍
2013/08/09 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
2014/03/05 Javascript
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
JavaScript中Function详解
2015/02/27 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
JS实现的另类手风琴效果网页内容切换代码
2015/09/08 Javascript
JS获取文件大小方法小结
2015/12/08 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
2017/07/04 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
JavaScript判断浏览器运行环境的详细方法
2019/06/30 Javascript
echarts统计x轴区间的数值实例代码详解
2019/07/07 Javascript
JS中的const命令你真懂它吗
2020/03/08 Javascript
python如何让类支持比较运算
2018/03/20 Python
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
Python基于datetime或time模块分别获取当前时间戳的方法实例
2019/02/19 Python
python try 异常处理(史上最全)
2019/03/07 Python
python 导入数据及作图的实现
2019/12/03 Python
opencv python图像梯度实例详解
2020/02/04 Python
最小二乘法及其python实现详解
2020/02/24 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
eBay德国站:eBay.de
2017/09/14 全球购物
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
保护环境标语
2014/06/09 职场文书
教师节倡议书
2014/08/30 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
房产转让协议书(2014版)
2014/09/30 职场文书
资料员岗位职责
2015/02/10 职场文书
Java并发编程必备之Future机制
2021/06/30 Java/Android
浅谈Redis的事件驱动模型
2022/05/30 Redis