兼容主流浏览器的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 相关文章推荐
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
ExpressJS入门实例
Jan 14 Javascript
javascript中Array数组的迭代方法实例分析
Feb 04 Javascript
详细分析JavaScript函数定义
Jul 16 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
Aug 27 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
Jul 27 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
angularjs点击图片放大实现上传图片预览
Feb 24 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
浅谈PDF.js使用心得
Jun 07 Javascript
webpack的CSS加载器的使用
Sep 11 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 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
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
utf8的编码算法 转载
2006/12/27 Javascript
javascript引用对象的方法
2007/01/11 Javascript
Date对象格式化函数代码
2010/07/17 Javascript
Javascript中valueOf与toString区别浅析
2013/03/19 Javascript
js操作label给label赋值及取label的值示例
2013/11/07 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
jquery将一个表单序列化为一个对象的方法
2014/01/03 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
简介JavaScript中toUpperCase()方法的使用
2015/06/06 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
2017/10/24 jQuery
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
vue配置nprogress实现页面顶部进度条
2019/09/21 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
初步解析Python中的yield函数的用法
2015/04/03 Python
Python操作串口的方法
2015/06/17 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
Mac PyCharm中的.gitignore 安装设置教程
2020/04/16 Python
python如何利用paramiko执行服务器命令
2020/11/07 Python
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
日本航空官方网站:JAL
2019/06/19 全球购物
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
酒店管理专业学生求职信
2013/09/27 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python